Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In 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.
Further reading
[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 a CSS box,
while margin doesn't.
0:13
In this stage, we're going to become
familiar with a few advanced concepts,
0:18
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:43
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
1:22
to distort it into 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:29
Uh-oh, both of these boxes say
they're 600 pixels in my CSS,
2:39
but they certainly don't match
in the browser, do they?
2:45
The problem here is that CSS
has added the border and
2:50
the padding to my bio box.
2:55
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:48
We need a better solution.
3:53
Fortunately, with one simple declaration,
3:57
we can ask our browser to include border
and padding when calculating box sizes.
4:00
I'm going to return my bio
box to 600 pixels before
4:07
typing the universal selector at
the top of my CSS document and
4:12
setting the box-sizing
property to border-box.
4:18
That's much better.
4:27
Now I have two 600 pixel boxes, Diane's
image and bio, that perfectly match.
4:29
Box-sizing: border-box includes
the border and padding in the box size.
4:37
As I inspect, I can see that
the content of my bio is narrower now.
4:45
518 pixels of content
plus all that padding and
4:51
border equals a 600 pixel box.
4:56
And if I change my root font size again,
5:01
The boxes still match.
5:10
You probably noticed I used the universal
selector for my box-sizing declaration.
5:14
Meaning now all elements
will include padding and
5:21
border in calculating box size.
5:24
While there are a few styling challenges
that I would recommend solving with
5:28
the universal selector,
this is a good case for it.
5:33
Applying box-sizing: border-box
everywhere should minimize
5:37
your struggle to match box sizes.
5:42
You need to sign up for Treehouse in order to download course files.
Sign up