1
00:00:00,920 --> 00:00:05,980
In this video, we'll demonstrate the 
impact padding has on a CSS layout.

2
00:00:07,000 --> 00:00:09,670
Let's start by looking at
the project files we'll

3
00:00:09,670 --> 00:00:11,850
be working with 
throughout this course.

4
00:00:13,240 --> 00:00:17,743
To get started, simply launch
a new workspace and follow along.

5
00:00:17,743 --> 00:00:20,806
You can also download
the project files for

6
00:00:20,806 --> 00:00:24,390
each lesson in the download
section of each page.

7
00:00:25,840 --> 00:00:30,750
We'll be applying a variety of styles
to a sample blog post written by

8
00:00:30,750 --> 00:00:33,470
Developer Diane about learning CSS.

9
00:00:34,770 --> 00:00:39,343
A link is included to an external
style sheet in the head,

10
00:00:39,343 --> 00:00:42,220
but the CSS file is empty.

11
00:00:42,220 --> 00:00:43,740
We'll add to it as we go.

12
00:00:45,840 --> 00:00:51,606
If I load this blog post in the browser,
my page isn't totally unstyled.

13
00:00:51,606 --> 00:00:56,240
It's being affected by
the user agent style sheet.

14
00:00:56,240 --> 00:01:00,170
Which is what we call the default
styles applied by the browser.

15
00:01:01,980 --> 00:01:07,077
In Google Chrome, I'm going to right-
click on the logo, which is the text

16
00:01:07,077 --> 00:01:12,110
in the header that reads Developer
Diane's blog, and choose Inspect.

17
00:01:13,600 --> 00:01:17,772
As we work through these exercises,
you'll want to get used to working with

18
00:01:17,772 --> 00:01:22,640
the inspector open, as I can select
different elements and view

19
00:01:22,640 --> 00:01:26,742
not only the CSS that's being
applied to each element,

20
00:01:26,742 --> 00:01:29,370
but also a diagram 
of the box model.

21
00:01:31,010 --> 00:01:36,020
Developer Diane's logo is in
a div with an ID of logo.

22
00:01:36,020 --> 00:01:40,196
And divs by default don't have
any adjustments to the box model.

23
00:01:40,196 --> 00:01:47,350
Neither padding, nor border, nor
margin is impacting this element.

24
00:01:49,120 --> 00:01:53,510
So why isn't the logo touching
the upper edge of the screen?

25
00:01:53,510 --> 00:01:55,480
We'll have to dig 
a bit more for that.

26
00:01:56,680 --> 00:02:00,890
The logo div has a parent
element called header.

27
00:02:00,890 --> 00:02:04,710
But the box model is empty 
so far there as well.

28
00:02:04,710 --> 00:02:08,660
But the header is inside 
the body element.

29
00:02:08,660 --> 00:02:13,614
And it looks like the body has eight
pixels of margin on all four sides.

30
00:02:15,758 --> 00:02:21,030
That's helpful information as we 
start styling. Let's start styling 

31
00:02:21,030 --> 00:02:25,746
the header element by setting its 
background to a shade of blue.

32
00:02:29,211 --> 00:02:31,530
And the text to ghostwhite.

33
00:02:35,225 --> 00:02:39,385
Based on what we've learned so 
far about padding, you might not 

34
00:02:39,385 --> 00:02:42,820
be surprised to discover that the 
white text is touching the edge

34b
00:02:42,820 --> 00:02:44,820
of the blue header box.

35
00:02:45,890 --> 00:02:49,420
We can use padding to provide
more comfortable spacing.

36
00:02:50,990 --> 00:02:55,415
We can define values for padding as
any length or percentage unit, and

37
00:02:55,415 --> 00:03:00,280
there are two different ways we
can set the values for padding.

38
00:03:00,280 --> 00:03:04,118
The first way is by setting
each property individually.

39
00:03:13,912 --> 00:03:16,810
Let's inspect the header
element in the browser.

40
00:03:18,670 --> 00:03:21,590
The box model diagram
is updated to reflect

41
00:03:21,590 --> 00:03:25,280
the padding added to 
the header element.

42
00:03:25,280 --> 00:03:29,247
And there is space in between
the content and the border,

43
00:03:29,247 --> 00:03:32,480
which is exactly what
padding accomplishes.

44
00:03:33,970 --> 00:03:38,830
An interesting use of the Inspector
is a sort of playground for your CSS.

45
00:03:40,320 --> 00:03:44,915
You can type in different values for
padding and preview the effects.

46
00:03:47,210 --> 00:03:52,170
The changes I've made here won't
actually affect my CSS document.

47
00:03:52,170 --> 00:03:55,650
When I hit refresh,
the changes disappear.

48
00:03:55,650 --> 00:03:59,326
But this can be a great way
to visualize changes to

49
00:03:59,326 --> 00:04:04,810
a CSS box before you actually
apply them in your style sheet.

50
00:04:04,810 --> 00:04:08,080
I've included a writing on this
technique in the Teacher's Notes.

51
00:04:09,460 --> 00:04:14,034
To avoid having to write a separate
declaration for each side,

52
00:04:14,034 --> 00:04:17,487
we can use the shorthand 
property for padding,

53
00:04:17,487 --> 00:04:22,340
which lets us set the padding on
all four sides in one declaration.

54
00:04:23,680 --> 00:04:29,695
If we only define one value, the same
padding is applied on all four sides.

55
00:04:32,732 --> 00:04:38,650
We can define four separate values
all at once using the shorthand.

56
00:04:38,650 --> 00:04:43,623
The first values applied to the top,
the second to the right,

57
00:04:43,623 --> 00:04:48,413
the third to the bottom side and
the fourth to the left side.

58
00:04:53,879 --> 00:04:58,378
It's important to remember this 
shorthand order of values, because

59
00:04:58,378 --> 00:05:03,570
the same order is used on other 
shorthand properties in CSS, 

59b
00:05:03,570 --> 00:05:07,570
which we'll cover before long.
Think of a clock and remember

60
00:05:07,570 --> 00:05:12,037
the order of values is top, 
right, bottom, left.

61
00:05:14,429 --> 00:05:20,380
If we define only three values,
the first value is applied to the top.

62
00:05:21,971 --> 00:05:26,120
The second is applied to 
the right and the left sides.

63
00:05:26,120 --> 00:05:29,600
And the third value applies
to the bottom side only.

64
00:05:31,580 --> 00:05:34,141
And if we define only two values,

65
00:05:34,141 --> 00:05:40,040
the first value is applied to the top 
and bottom sides of the element.

66
00:05:40,040 --> 00:05:43,760
And the second value is applied
to the right and left sides.

67
00:05:45,550 --> 00:05:50,115
Now, the top and bottom sides 
have 10 pixels of padding,

68
00:05:50,115 --> 00:05:54,820
while the right and
left sides have 15 pixels.

69
00:05:54,820 --> 00:05:58,421
This matches the declarations
we wrote earlier, but

70
00:05:58,421 --> 00:06:01,070
using one statement 
rather than four.

71
00:06:02,510 --> 00:06:07,185
Finally, it's worth noting that
we could also declare a fluid

72
00:06:07,185 --> 00:06:09,840
padding value using percentages.

73
00:06:10,970 --> 00:06:15,411
When defining a top or bottom 
padding using a percentage value,

74
00:06:15,411 --> 00:06:19,935
it's important to understand that
the percentage is relative to

75
00:06:19,935 --> 00:06:26,820
the total width of the container,
not the height. This will apply 

76
00:06:26,820 --> 00:06:32,657
10% of top and bottom padding 
based on the header's width and

77
00:06:32,657 --> 00:06:38,190
15% to the left and right sides,
also based on the width.

78
00:06:39,320 --> 00:06:43,390
To demonstrate, notice that as 
I adjust the height of my 

79
00:06:43,390 --> 00:06:47,016
browser viewport, the 
padding doesn't change.

80
00:06:48,532 --> 00:06:52,470
But as I decrease
the width of the viewport,

81
00:06:52,470 --> 00:06:57,161
the padding on all four
sides adjusts accordingly.

82
00:06:57,161 --> 00:07:03,370
Keep this in mind, if your padding
is measured in percentages.

83
00:07:03,370 --> 00:07:08,061
I'm going to undo that and restore 
the pixel values before we move on

84
00:07:08,061 --> 00:07:12,527
to our next lesson, where we'll 
examine the border property.