1
00:00:00,000 --> 00:00:03,990
No matter what the topic, you can always find a handful of core concepts that

2
00:00:04,000 --> 00:00:05,990
are critical to understanding the subject properly.

3
00:00:06,000 --> 00:00:09,990
For CSS, the box model is certainly one of those concepts.

4
00:00:10,000 --> 00:00:13,990
Without understanding the box model, almost every task related to the physical

5
00:00:14,000 --> 00:00:17,990
relationships of elements would be more difficult.

6
00:00:18,000 --> 00:00:20,990
If, on the other hand, you have a thorough grasp of the box model,

7
00:00:21,000 --> 00:00:23,990
tasks like page layout become much easier.

8
00:00:24,000 --> 00:00:25,990
So, what is the box model?

9
00:00:26,000 --> 00:00:29,990
Well, the box model is the term used to describe the rules surrounding the

10
00:00:30,000 --> 00:00:32,990
physical properties of all HTML elements.

11
00:00:33,000 --> 00:00:32,990
If that makes you go, huh?

12
00:00:33,000 --> 00:00:36,990
well, think about it this way.

13
00:00:37,000 --> 00:00:42,990
Every single element on your web page is considered to be in a rectangular box.

14
00:00:43,000 --> 00:00:48,990
The properties of this box, its width, height, padding, and margin defined not

15
00:00:49,000 --> 00:00:51,990
only the sides of the element, but also how it relates to the elements

16
00:00:52,000 --> 00:00:55,990
around it, so yeah, it's pretty important.

17
00:00:56,000 --> 00:00:59,990
First, let's cover the basics, the properties that make up the box model.

18
00:01:00,000 --> 00:01:03,990
Now, here we have a nice visual representation of an element's box.

19
00:01:04,000 --> 00:01:09,990
This could be a paragraph, a heading, a list item, really any element on your page.

20
00:01:10,000 --> 00:01:13,990
If we start on the outside of an element, the first item we encounter is

21
00:01:14,000 --> 00:01:15,990
the element's margin.

22
00:01:16,000 --> 00:01:20,990
Margins represent the space around an element and are used to define the space

23
00:01:21,000 --> 00:01:22,990
between page elements.

24
00:01:23,000 --> 00:01:25,990
Margins are not used to calculate the final width of an element, but as you can

25
00:01:26,000 --> 00:01:30,990
see, they are very important in terms of how elements relate to each other and

26
00:01:31,000 --> 00:01:34,990
how much space an element requires within a layout.

27
00:01:35,000 --> 00:01:38,990
The next property we come to is the element's border.

28
00:01:39,000 --> 00:01:41,990
All elements are allowed to have a border assigned to it, even though by

29
00:01:42,000 --> 00:01:44,990
default, most elements don't have one.

30
00:01:45,000 --> 00:01:47,990
Borders have three properties that define the border itself:

31
00:01:48,000 --> 00:01:51,990
the border-width, border-style, and border-color.

32
00:01:52,000 --> 00:01:56,990
You can also assign borders individually to the top, right, bottom, and left

33
00:01:57,000 --> 00:01:58,990
sides of an element.

34
00:01:59,000 --> 00:02:01,990
Borders are considered to be part of the box model because they defined the

35
00:02:02,000 --> 00:02:06,990
outside edge of an element and because their physical size is used when

36
00:02:07,000 --> 00:02:08,990
calculating the overall size of an element.

37
00:02:09,000 --> 00:02:12,990
This often gets overlooked in many layouts, and more often than not, it can

38
00:02:13,000 --> 00:02:14,990
cause serious problems.

39
00:02:15,000 --> 00:02:18,990
Forgetting to add the size of the border to the size of an element can cause

40
00:02:19,000 --> 00:02:22,990
tight layouts to break, as elements will be anywhere between two to four pixels

41
00:02:23,000 --> 00:02:24,990
larger than anticipated.

42
00:02:25,000 --> 00:02:27,990
After borders we have padding.

43
00:02:28,000 --> 00:02:31,990
Padding is space added to an element inside the border.

44
00:02:32,000 --> 00:02:36,990
Now the easiest way to think of this is to imagine a box with something fragile

45
00:02:37,000 --> 00:02:38,990
inside of it that you need to ship.

46
00:02:39,000 --> 00:02:42,990
More than likely, you're going to add some packing material to the box to keep

47
00:02:43,000 --> 00:02:46,990
the fragile object from touching the edge of the box; that's padding.

48
00:02:47,000 --> 00:02:51,990
Padding is totally transparent, and its value is used to calculate the overall

49
00:02:52,000 --> 00:02:53,990
width and height of an element.

50
00:02:54,000 --> 00:02:56,990
Finally, we have the width and height properties.

51
00:02:57,000 --> 00:03:00,990
You can set these properties for any element using either percentages or a fixed

52
00:03:01,000 --> 00:03:02,990
unit of measurement.

53
00:03:03,000 --> 00:03:05,990
It's important to remember, however, that there's a big difference between the

54
00:03:06,000 --> 00:03:09,990
width and height properties and the total width and height of an element.

55
00:03:10,000 --> 00:03:13,990
This tends to be very confusing to those that are new to CSS or simply

56
00:03:14,000 --> 00:03:15,990
unfamiliar with the box model.

57
00:03:16,000 --> 00:03:19,990
To calculate the total width of an element, use the left and right border

58
00:03:20,000 --> 00:03:24,990
values, the left and right padding values and the element's width property.

59
00:03:25,000 --> 00:03:27,990
If you were thinking that this has probably tripped up a lot of designers,

60
00:03:28,000 --> 00:03:29,990
you would be right.

61
00:03:30,000 --> 00:03:34,990
Often layouts will break because the total width of an element is greater than anticipated.

62
00:03:35,000 --> 00:03:38,990
However, understanding this concept gives you the ability to confidently set

63
00:03:39,000 --> 00:03:43,990
values to all of the box model properties to fit specific layouts or regions.

64
00:03:44,000 --> 00:03:46,990
The box model, for the most part, is pretty simple.

65
00:03:47,000 --> 00:03:50,990
There are, however, a few things that can trip you up, if you're not careful.

66
00:03:51,000 --> 00:03:55,990
First, just because a property isn't declared, don't assume that its value is zero.

67
00:03:56,000 --> 00:04:00,990
Remember that all browsers have default styles that apply to HTML elements.

68
00:04:01,000 --> 00:04:04,990
If you don't overwrite them, the default value will be applied.

69
00:04:05,000 --> 00:04:09,990
It's also a quite common to see authors set the width of the element to 100% in

70
00:04:10,000 --> 00:04:12,990
order to make it fit fully within a parent element.

71
00:04:13,000 --> 00:04:17,990
For the most part, that's fine, but any values for margins, borders, and padding

72
00:04:18,000 --> 00:04:22,990
will force the total width to be over 100%, making the element no longer fit.

73
00:04:23,000 --> 00:04:27,990
There are other things, like margin collapse, floated elements and considerations

74
00:04:28,000 --> 00:04:30,990
for undefined widths and heights, that you'll need to investigate as your

75
00:04:31,000 --> 00:04:33,990
understanding of the box model deepens.

76
00:04:34,000 --> 00:04:37,990
For now, concentrate on the fact that the properties that make up the box model

77
00:04:38,000 --> 00:04:41,990
allow you to control the physical dimensions of the elements on your page, and

78
00:04:42,000 --> 00:04:45,990
that to fully and truly master visually formatting your elements,

79
00:04:46,000 --> 00:04:56,000
you'll need to understand the ins and outs of how those properties work.