1
00:00:00,570 --> 00:00:01,785
Hey there, how'd it go?

2
00:00:01,785 --> 00:00:04,930
Were you able to write most or all of
the box model properties and values for

3
00:00:04,930 --> 00:00:06,090
this practice session?

4
00:00:06,090 --> 00:00:09,760
If not, no worries, you can watch my
solution, compare it to what you wrote,

5
00:00:09,760 --> 00:00:11,430
and then try to recreate it yourself.

6
00:00:11,430 --> 00:00:14,410
The goal was to get the box
model of the box element

7
00:00:14,410 --> 00:00:17,430
to match what's shown in box.png.

8
00:00:17,430 --> 00:00:18,560
Now let's walk through the solution.

9
00:00:19,620 --> 00:00:23,410
First up,
to give an element a fluid width,

10
00:00:23,410 --> 00:00:25,870
you set its width property
to a percentage value.

11
00:00:25,870 --> 00:00:33,390
In this case, I set width to 90%,
then set the height value to 300 pixels.

12
00:00:33,390 --> 00:00:37,158
Now to prevent the width from
getting wider than 600 pixels,

13
00:00:37,158 --> 00:00:41,774
I set a maximum width using the max
width property and the value 600 pixels.

14
00:00:47,910 --> 00:00:53,692
Next, I applied 20 pixels of padding on
all four sides using the padding shorthand

15
00:00:53,692 --> 00:00:59,490
property, which can apply all four values
at once, and I use the value 20 pixels.

16
00:01:04,962 --> 00:01:10,339
Then, to set the border styles,
I used the border shorthand property and

17
00:01:10,339 --> 00:01:16,429
set the value to 2 pixels solid, and
set the color to the hex value, 8292b1.

18
00:01:23,028 --> 00:01:26,878
Next, to center the box component
horizontally on the page,

19
00:01:26,878 --> 00:01:30,802
I used the margin shorthand property and
set the value to auto,

20
00:01:30,802 --> 00:01:35,335
which automatically calculates equal
margins for each side of the box.

21
00:01:45,119 --> 00:01:51,450
Now, applying a fixed height of 300 pixels
to box caused its contents to overflow.

22
00:01:52,670 --> 00:01:57,410
So I used the overflow property to
handle the overflowing content.

23
00:01:57,410 --> 00:02:02,540
And setting the value to auto prevents
the contents of the box from overflowing

24
00:02:02,540 --> 00:02:05,790
by clipping or
cutting out any overflowing content.

25
00:02:05,790 --> 00:02:08,830
So any time there's content
that's not immediately visible,

26
00:02:08,830 --> 00:02:12,320
the browser provides a scroll bar to
let you scroll and view the content.

27
00:02:14,810 --> 00:02:19,230
You could have also used the value scroll,
which will always display a scroll

28
00:02:19,230 --> 00:02:22,771
bar instead of letting the browser
decide when to display it.

29
00:02:25,827 --> 00:02:30,767
And to make sure that you're just
displaying a vertical scroll bar,

30
00:02:30,767 --> 00:02:33,610
you can use the property overflow-y.

31
00:02:33,610 --> 00:02:37,430
Finally, the box has an extra 44
pixels applied to its total width and

32
00:02:37,430 --> 00:02:40,620
height, because of the padding and
border with values applied to it.

33
00:02:40,620 --> 00:02:45,920
But we need box to be exactly 300 pixels
tall and no wider than 600 pixels.

34
00:02:45,920 --> 00:02:51,090
To adjust this, you could manually
subtract 44 pixels from the max width and

35
00:02:51,090 --> 00:02:53,020
height values of box.

36
00:02:53,020 --> 00:02:56,817
But instead I challenged you to use a CSS
box model feature that automatically

37
00:02:56,817 --> 00:03:00,206
includes any border width and
padding values into the total width and

38
00:03:00,206 --> 00:03:01,880
height of an element.

39
00:03:01,880 --> 00:03:05,680
And that feature is box sizing,
which, as its name suggests,

40
00:03:05,680 --> 00:03:08,040
alters the size of a box.

41
00:03:08,040 --> 00:03:11,220
In the style sheet,
I used the box-sizing property.

42
00:03:11,220 --> 00:03:15,126
And setting the value to
border-box forced the padding and

43
00:03:15,126 --> 00:03:19,360
border width values into the specified
width and height of box.

44
00:03:22,974 --> 00:03:26,993
So now if you inspect the box
element in your development tools,

45
00:03:26,993 --> 00:03:31,970
you should see that the dimensions
match the diagram shown in box.png.

46
00:03:31,970 --> 00:03:33,767
And your page should look similar to mine.

47
00:03:36,403 --> 00:03:39,740
I hope you were able to complete
this practice session successfully.

48
00:03:39,740 --> 00:03:42,130
If not, why not start over and
try to write the properties and

49
00:03:42,130 --> 00:03:44,030
values without looking at my version?

50
00:03:44,030 --> 00:03:46,620
I'm also going to teach you more
about the box sizing property and

51
00:03:46,620 --> 00:03:48,030
layout in my CSS course.

52
00:03:48,030 --> 00:03:49,360
So I'll see you soon and happy coding.