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 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 by 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
You need to sign up for Treehouse in order to download course files.
Sign up