WEBVTT

1
00:00:00.000 --> 00:00:02.001
- [Presenter] Using different box model properties

2
00:00:02.001 --> 00:00:05.000
affects the overall size of the element.

3
00:00:05.000 --> 00:00:08.005
This behavior can be managed with the box-sizing property,

4
00:00:08.005 --> 00:00:10.008
which defines how the total width and height

5
00:00:10.008 --> 00:00:12.008
of an element are calculated.

6
00:00:12.008 --> 00:00:16.008
There are two values, content-box and border-box.

7
00:00:16.008 --> 00:00:19.007
The default box-sizing value is content-box.

8
00:00:19.007 --> 00:00:21.005
The width and height values apply

9
00:00:21.005 --> 00:00:24.000
to the content-box of the element.

10
00:00:24.000 --> 00:00:26.005
Any added border or padding styles

11
00:00:26.005 --> 00:00:30.000
will increase the element's total size.

12
00:00:30.000 --> 00:00:32.005
Margin adds space around the element,

13
00:00:32.005 --> 00:00:35.005
so it's not included in the total size of the element,

14
00:00:35.005 --> 00:00:38.007
but it does affect how much space the element takes up.

15
00:00:38.007 --> 00:00:41.006
When the border-box value is used, the width and height

16
00:00:41.006 --> 00:00:44.000
will still be applied to the content-box.

17
00:00:44.000 --> 00:00:47.007
However, when padding and border styles are added,

18
00:00:47.007 --> 00:00:52.005
the content-box shrinks to maintain the same overall size

19
00:00:52.005 --> 00:00:55.005
as defined by the width and height properties.

20
00:00:55.005 --> 00:00:58.003
Again, margin is not included in these adjustments,

21
00:00:58.003 --> 00:01:01.005
since it adds space around the element.

22
00:01:01.005 --> 00:01:05.002
Let's look at a code pen demo to see how this works.

23
00:01:05.002 --> 00:01:07.001
Here are two boxes.

24
00:01:07.001 --> 00:01:09.008
The first one has the default box sizing value

25
00:01:09.008 --> 00:01:10.009
of content-box,

26
00:01:10.009 --> 00:01:13.007
and the second one has a value of border-box.

27
00:01:13.007 --> 00:01:16.005
Usually, you don't need to declare a default style,

28
00:01:16.005 --> 00:01:17.006
but I just added it here

29
00:01:17.006 --> 00:01:20.003
to make it easier to see for this demo.

30
00:01:20.003 --> 00:01:23.009
Right now, the width, height, and margin have been set.

31
00:01:23.009 --> 00:01:26.005
Margin will have no effect on the box sizing,

32
00:01:26.005 --> 00:01:29.002
so the size of the elements for both boxes

33
00:01:29.002 --> 00:01:32.005
is still 200 by 100 pixels.

34
00:01:32.005 --> 00:01:35.002
Also, note that the text is currently aligned

35
00:01:35.002 --> 00:01:38.001
to the top left edge of its container.

36
00:01:38.001 --> 00:01:40.004
Now let's add the padding style in.

37
00:01:40.004 --> 00:01:42.007
We can see that it's been added to both boxes,

38
00:01:42.007 --> 00:01:45.000
because the text is no longer lined up

39
00:01:45.000 --> 00:01:46.007
to the edge of the box.

40
00:01:46.007 --> 00:01:50.003
The padding has been added around the content-box,

41
00:01:50.003 --> 00:01:54.002
but now, box 1 is larger than box 2.

42
00:01:54.002 --> 00:01:56.003
There's now 200 pixels of width,

43
00:01:56.003 --> 00:02:00.003
plus 20 pixels of padding on the left and right sides,

44
00:02:00.003 --> 00:02:04.000
which equals 240 pixels for the total width.

45
00:02:04.000 --> 00:02:07.005
And for the height, it's set to 100 pixels,

46
00:02:07.005 --> 00:02:11.004
plus 20 pixels of padding on the top and bottom

47
00:02:11.004 --> 00:02:15.009
for a total of 140 pixels for the height of the element.

48
00:02:15.009 --> 00:02:18.007
For box 2, using a value of border-box

49
00:02:18.007 --> 00:02:21.005
will decrease the size of the content-box,

50
00:02:21.005 --> 00:02:24.009
shrinking it just enough to make space for the padding.

51
00:02:24.009 --> 00:02:30.003
So the total size of box 2 is still 200 by 100 pixels.

52
00:02:30.003 --> 00:02:34.007
The same effect will happen when adding a border style.

53
00:02:34.007 --> 00:02:38.003
If I wanted box 1 to remain the same overall size

54
00:02:38.003 --> 00:02:39.009
as what was initially set,

55
00:02:39.009 --> 00:02:42.005
we'll need to reduce the width and height values

56
00:02:42.005 --> 00:02:45.002
to account for the padding and border.

57
00:02:45.002 --> 00:02:46.002
So for the width,

58
00:02:46.002 --> 00:02:50.004
it would be 200 minus 20 pixels of left padding,

59
00:02:50.004 --> 00:02:52.001
20 pixels of right padding,

60
00:02:52.001 --> 00:02:55.000
minus 10 pixels of border on the left

61
00:02:55.000 --> 00:02:57.006
and 10 pixels of border on the right,

62
00:02:57.006 --> 00:03:00.006
which equals 140 pixels.

63
00:03:00.006 --> 00:03:02.004
I'll add it to the box 1 selector,

64
00:03:02.004 --> 00:03:05.001
so we can compare its size to box 2.

65
00:03:05.001 --> 00:03:07.007
For the height value, change it to 40 pixels

66
00:03:07.007 --> 00:03:09.009
to make room for the top and bottom padding

67
00:03:09.009 --> 00:03:12.004
and border styles.

68
00:03:12.004 --> 00:03:14.007
So while you can make these adjustments,

69
00:03:14.007 --> 00:03:16.008
it's generally easier to size elements

70
00:03:16.008 --> 00:03:18.007
using the border box behavior,

71
00:03:18.007 --> 00:03:20.007
because you won't need to adjust the width and height

72
00:03:20.007 --> 00:03:24.000
every time you add padding or border styles.

73
00:03:24.000 --> 00:03:26.003
Maintaining the same width is important

74
00:03:26.003 --> 00:03:30.005
when fitting multiple elements into a specific space.

75
00:03:30.005 --> 00:03:34.003
For example, with the default box sizing of content-box,

76
00:03:34.003 --> 00:03:38.002
trying to add four 100 pixel elements

77
00:03:38.002 --> 00:03:40.008
won't fit in a 400-pixel container

78
00:03:40.008 --> 00:03:43.009
when padding or border is added.

79
00:03:43.009 --> 00:03:46.003
So when starting a project, it's common to add

80
00:03:46.003 --> 00:03:50.000
what's often referred to as the box model fix,

81
00:03:50.000 --> 00:03:54.000
which is a CSS code snippet included in your CSS file.

82
00:03:54.000 --> 00:03:55.008
This will apply the border box value

83
00:03:55.008 --> 00:03:58.001
to all the elements on the page.

84
00:03:58.001 --> 00:04:01.004
The box sizing is first applied to the root element

85
00:04:01.004 --> 00:04:03.008
and is one of the special scenarios

86
00:04:03.008 --> 00:04:06.000
where the universal selector is used

87
00:04:06.000 --> 00:04:07.005
to make all the descendant elements

88
00:04:07.005 --> 00:04:10.007
and pseudo elements inherit this style.

89
00:04:10.007 --> 00:04:13.008
This fix was first documented by Paul Irish.

90
00:04:13.008 --> 00:04:15.004
If you'd like to learn more about the history

91
00:04:15.004 --> 00:04:17.004
and changes to the fix over the years,

92
00:04:17.004 --> 00:04:18.009
check out the extra resources

93
00:04:18.009 --> 00:04:21.000
included in the links.PDF file.