Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice the CSS Box Model!
You have completed Practice the CSS Box Model!
Preview
Welcome back. How did you do? Let’s go over how I solved this challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
How did you do?
0:01
Let's go over how I solved this challenge.
0:02
For the div with an ID of box, I'll
start by applying 25 pixels of padding
0:06
and set the background
color to lightsteelblue.
0:14
Here's where it gets interesting.
0:26
The instructions specify to make
this box 90% of both the width and
0:28
the height of the viewport.
0:33
Now, if we try using percent values,
you'll notice that works for
0:36
the width but not the height.
0:40
This has to do with the behavior
of block elements in CSS.
0:44
The height of block elements will
always be dictated by the height of
0:48
the content unless we use
a fixed value like pixels.
0:52
However, it is possible to make our box
be 90% of the height of the viewport.
0:56
We just need to switch to a unit
built to accomplish this.
1:02
All right, now our box div is set to 90
vh or 90% of the height of the viewport.
1:09
Though it looks a bit taller
than 90%, doesn't it?
1:15
Open up your browser Inspector and
see if you can figure out why.
1:19
If you said our padding is being added
to the size of our box, well done.
1:25
Let's use the universal selector
to add a box-sizing: border-box
1:31
declaration to eliminate this problem.
1:35
That's better.
1:47
I've included a post from Stack Overflow
in the Teacher's Notes if you'd
1:49
like to read more on why vh worked
here when percentages didn't.
1:52
Our instructions asked us to center
the box div both horizontally and
1:58
vertically within the viewport.
2:03
Let's try solving this by setting
the margin property to auto.
2:06
It looks like margin: auto centered
the box horizontally but not vertically.
2:13
I'm checking out a reading
in the Teacher's Notes
2:19
with more detail on margin: auto.
2:22
And it says the browser will interpret
top and bottom auto margins as 0 pixels.
2:24
So that doesn't really help us.
2:30
Instead, we'll have to get creative
with our viewport units to center
2:33
the box vertically.
2:36
5 vh of top and bottom margin plus
90 vh of content equals 100%.
2:42
That should give us vertical centering.
2:50
All right, styling our image
should be pretty straightforward.
2:55
We'll make it 600 pixels wide and
2:59
give it a 10 pixel solid aliceblue border.
3:03
Next up is our div called text.
3:18
The width is once again 600 pixels.
3:21
The padding is 100 pixels on the top and
50 pixels on the sides.
3:26
We'll add a 25 pixel
solid lightsalmon border.
3:33
And we'll increase the margin by 10
pixels just on the top and bottom.
3:41
And finally set the background
color to floralwhite.
3:48
Hmm. I think I see
3:55
an opportunity to improve
this code using the DRY principle.
3:57
Do you see anywhere I'm repeating myself?
4:02
That's right, the width declaration.
4:07
Let me move those into
a separate selector.
4:09
That's better. Preview your
page in the browser, and great.
4:24
Since we added the box-sizing:
border-box declaration
4:30
to the universal selector
earlier in this exercise,
4:34
these two boxes are the same
width even though they
4:38
contain different amounts of
border and padding.
4:41
That box-sizing declaration
sure is a useful one.
4:46
I hope this exercise is
helping you feel more
4:50
comfortable when working
with the CSS box model.
4:53
Keep on practicing, and
I'll see you next time.
4:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up