Preview
Video Player
00:00
00:00
Box-sizing
5:45In our last stage, we learned the parts of the CSS Box model. We also learned that padding and border impact the size of a CSS box, while margin doesn’t. In this stage, we’re going to become familiar with a few advanced concepts, including one that will make measuring CSS boxes a whole lot easier. Let’s go back to our demo, and you’ll see what I mean.
[MUSIC]
0:00
In our last stage,
we learned the parts of the CSS box model.
0:05
We also learned that padding and
0:10
border impact the size of the CSS
box while margin doesn't.
0:12
In this stage, we're going to become
familiar with a few advanced concepts,
0:17
including one that will make measuring
CSS boxes a whole lot easier.
0:23
Let's go back to our demo,
and you'll see what I mean.
0:28
I'm going to style the contents
of the aside element using CSS.
0:33
The aside currently contains
a photo of developer Diane,
0:38
plus a brief bio, and
links to other blog posts she's written.
0:42
I'll start by making the photo smaller.
0:49
I've used the descendant selector
since I have different plans for
0:53
the image inside the article element,
which we'll get to later.
0:57
I've set the width to 600 pixels wide.
1:04
Since I omitted the height property,
1:07
the browser will use the default
value which is height auto.
1:10
Auto means respect to the original
aspect ratio of the image.
1:16
Since the image is in landscape format,
we wouldn't want to distort it into
1:22
something like a square
image as the width gets smaller.
1:27
Distorted images look bad.
1:33
Since again, height auto is the default
I'll delete my height declaration.
1:37
Diane's bio is beneath the image.
1:45
Let's give the paragraph an id of bio and
style it to match the picture.
1:48
Not bad, but I'm not too
thrilled about the text being so
2:06
close to the edge of my colorful box.
2:10
Fortunately, since we
learned the box model,
2:14
we know padding can increase
the space inside the box.
2:17
I'll use a rem measurement to make my
spacing relative to the font-size.
2:22
I might even fancy up my
box with a bit of a border.
2:30
Uh oh. Both of these boxes say
they're 600 pixels in my CSS, but
2:39
they certainly don't match in
the browser, do they?
2:46
The problem here is that CSS has added
the border and the padding to my bio box.
2:50
If I inspect,
I can see that my bio is 674 pixels,
2:58
which comes from adding
32 pixels of padding and
3:03
5 pixels of border on both the left and
right sides.
3:08
We could solve this by shrinking
the bio width to 526 pixels,
3:16
that's 600 minus the 74
pixels of padding and border.
3:22
But that solution is less than ideal.
3:29
Nobody wants a layout
full of complicated math.
3:33
And what happens if I bump
up my root font-size?
3:36
The boxes are no longer a perfect match.
3:50
We need a better solution.
3:53
Fortunately, with one simple declaration,
3:56
we can ask our browser to include border
and padding when calculating box sizes.
3:59
I'm going to return my
bio box to 600 pixels
4:05
Before typing the universal selector
at the top of my CSS document
4:11
And setting the box-sizing
property to border-box.
4:19
That's much better.
4:33
Now I have two 600 pixel boxes, Diane's
image and bio that perfectly match.
4:35
Box-sizing border-box includes
the border and padding in the box size.
4:42
As I inspect I can see that
the content of my bio is narrower now.
4:48
518 pixels of content
plus all that padding and
4:53
border equals a 600 pixel box.
4:58
And if I change my root font-size again,
5:01
The boxes still match.
5:14
You probably noticed I used the universal
selector for my box-sizing declaration.
5:16
Meaning now all elements
will include padding and
5:23
border in calculating box size.
5:26
While there are few styling
challenges that I would recommend
5:29
solving with the universal selector,
this is a good case for it.
5:33
Applying box-sizing:
border-box everywhere
5:37
should minimize your
struggle to match box sizes.
5:41