1
00:00:00,000 --> 00:00:03,990
After our overview of the box model, I want to take a moment to familiarize you

2
00:00:04,000 --> 00:00:08,990
with the individual properties of the box model, and I want to start with

3
00:00:09,000 --> 00:00:10,990
margins and padding.

4
00:00:11,000 --> 00:00:13,990
Padding is the space inside of elements that hold the contents of an

5
00:00:14,000 --> 00:00:15,990
element away from its edge.

6
00:00:16,000 --> 00:00:18,990
You can specify padding in several ways.

7
00:00:19,000 --> 00:00:23,990
First, you can define padding individually for each side of an element, and keep

8
00:00:24,000 --> 00:00:27,990
in mind, however, that setting padding in only one direction is not the same as

9
00:00:28,000 --> 00:00:30,990
setting padding to zero in other directions.

10
00:00:31,000 --> 00:00:34,990
Any existing padding on other sides is still going to apply.

11
00:00:35,000 --> 00:00:37,990
You can also use shorthand notation when defining padding.

12
00:00:38,000 --> 00:00:41,990
There are four variations on padding shorthand.

13
00:00:42,000 --> 00:00:45,990
First, you can define four separate values, separated by white spaces.

14
00:00:46,000 --> 00:00:51,990
Now these values are going to apply in order to the top, right, bottom, and

15
00:00:52,000 --> 00:00:53,990
left sides respectively.

16
00:00:54,000 --> 00:00:58,990
Now if you use three values, the first value will be applied to top, the

17
00:00:59,000 --> 00:01:03,990
second value for the left and right sides, and the last value will be applied to the bottom.

18
00:01:04,000 --> 00:01:08,990
If you only use two values, the first value applies to the top and the bottom,

19
00:01:09,000 --> 00:01:12,990
while the second value will apply to both the left and right sides.

20
00:01:13,000 --> 00:01:16,990
Finally, if you simply use a single value, that value is going to be used

21
00:01:17,000 --> 00:01:19,990
for all sides equally.

22
00:01:20,000 --> 00:01:23,990
The rules for padding are actually fairly straightforward, and most elements

23
00:01:24,000 --> 00:01:24,990
start with no padding at all.

24
00:01:25,000 --> 00:01:29,990
However, when width values are set on an element as well, there are couple of

25
00:01:30,000 --> 00:01:30,990
things to keep an eye on.

26
00:01:31,000 --> 00:01:34,990
Now by default, most elements that are considered block-level elements, like

27
00:01:35,000 --> 00:01:38,990
paragraphs, will go ahead and expand to fit the width of their parents.

28
00:01:39,000 --> 00:01:42,990
If you don't define the width for those elements, padding will be added to the

29
00:01:43,000 --> 00:01:46,990
inside of the element, which causes the content area to shrink, and sometimes

30
00:01:47,000 --> 00:01:49,990
results in the element actually getting taller.

31
00:01:50,000 --> 00:01:53,990
If on the other hand, you specify a width, say 100%,

32
00:01:54,000 --> 00:01:57,990
that padding will then result in the element actually becoming wider than its

33
00:01:58,000 --> 00:02:02,990
parent element, as the padding is actually added to the outside of an element's width.

34
00:02:03,000 --> 00:02:05,990
When defining an element width, it's crucial that you factor the element's

35
00:02:06,000 --> 00:02:07,990
padding into the equation.

36
00:02:08,000 --> 00:02:12,990
Most designers use padding to keep the contents of a box away from its edge.

37
00:02:13,000 --> 00:02:16,990
This can be used to create visual boxes, like pull quotes out of a single element,

38
00:02:17,000 --> 00:02:19,990
without using graphics or background images.

39
00:02:20,000 --> 00:02:23,990
Padding can also be used to move the contents of an element away from a

40
00:02:24,000 --> 00:02:27,990
background image, to give the appearance of custom bullets, or as a way to add

41
00:02:28,000 --> 00:02:29,990
decorative touches to elements.

42
00:02:30,000 --> 00:02:34,990
Margins represent the space between the elements and are applied outside of an

43
00:02:35,000 --> 00:02:39,990
element's edge. While it's not factored into the total width of an element, it

44
00:02:40,000 --> 00:02:43,990
does affect the amount of space that an element takes up on that page and is

45
00:02:44,000 --> 00:02:46,990
critical to achieving proper spacing between elements.

46
00:02:47,000 --> 00:02:50,990
Unlike padding, many elements do have a default margin that you need do account

47
00:02:51,000 --> 00:02:53,990
for when structuring layouts.

48
00:02:54,000 --> 00:02:57,990
Later on, we are going to discuss what a CSS reset is, how they affect margins,

49
00:02:58,000 --> 00:02:59,990
and the rationale for using them.

50
00:03:00,000 --> 00:03:03,990
Margins also use the same syntax as padding, so you can either specify margins

51
00:03:04,000 --> 00:03:07,990
for each side individually or use the shorthand notation.

52
00:03:08,000 --> 00:03:11,990
For the most part, margins are pretty straightforward, but there is one aspect

53
00:03:12,000 --> 00:03:16,990
of margins that tends to trip up even the most experienced of designers.

54
00:03:17,000 --> 00:03:21,990
Unlike horizontal margins, vertical margins collapse. That means that if you

55
00:03:22,000 --> 00:03:26,990
have two elements stacked one on top of another, only one of the elements'

56
00:03:27,000 --> 00:03:28,990
margins are applied.

57
00:03:29,000 --> 00:03:33,990
Take this example. If you have heading one with a bottom margin of 16 pixels and

58
00:03:34,000 --> 00:03:37,990
a paragraph with a top margin is 16 pixels, there were only be 16 pixels' worth

59
00:03:38,000 --> 00:03:41,990
of space between them, not 32 pixels.

60
00:03:42,000 --> 00:03:45,990
This prevents paragraphs and headings from having double spaces between the two of them.

61
00:03:46,000 --> 00:03:50,990
If the values are not the same, the higher of the two values is going to be used.

62
00:03:51,000 --> 00:03:54,990
There is a lot more to margin collapse, so as you learn CSS, pay particular

63
00:03:55,000 --> 00:03:59,990
attention to when vertical margins collapse, why they collapse, and how you can

64
00:04:00,000 --> 00:04:01,990
trigger, or prevent it, based on your needs.

65
00:04:02,000 --> 00:04:06,990
As you can imagine, mastering how margins and padding work is a very important

66
00:04:07,000 --> 00:04:08,990
part of learning CSS.

67
00:04:09,000 --> 00:04:11,990
They're both incredibly important to properly positioning content and

68
00:04:12,000 --> 00:04:14,990
establishing relationships between visual elements.

69
00:04:15,000 --> 00:04:18,990
Mastering these properties early on can save you from some frustrating

70
00:04:19,000 --> 00:04:29,000
moments down the road.