Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Padding is often used to give an element's content area some breathing room by separating the content from the surrounding border area.
Padding Reference
We can define values for padding as any length or a percentage unit. There are two ways we can set the values for padding. The first way is setting each property individually:
.wildlife {
padding-top: 100px;
padding-right: 120px;
padding-bottom: 50px;
padding-left: 20px;
}
We can also use the shorthand property for padding, which lets us set the padding on all four sides in one declaration:
.wildlife {
padding: 100px 120px 50px 20px;
}
The order of the values is: Top, Right, Bottom, Left. Think clockwise.
-
0:00
Now let's take a look at how the content area of an element is effected by padding.
-
0:04
So in our latest workspace, let's go back to our index.html file.
-
0:09
And we're gonna scroll down to line 18.
-
0:12
And let's give the div on line 18 the class wildlife.
-
0:20
And notice how currently the content inside our wildlife div is commented out.
-
0:24
We'll get back to that in just a bit.
-
0:26
So, let's save our index dot html file and go back to our style.css file.
-
0:31
And we're gonna scroll down to the bottom of our style sheet and
-
0:36
right beneath the layout styles section, we're gonna target the class wildlife.
-
0:41
[BLANK_AUDIO]
-
0:45
So first let's add a color property.
-
0:48
And we're gonna make the text color inside our wildlife.div white.
-
0:53
And we're also gonna wanna give it a background color.
-
0:56
One that's a lighter shade of black.
-
0:58
So to do that, let's add a background color property and
-
1:02
set the hex value to pound 434a52.
-
1:08
So when we save our style sheet and
-
1:11
go back to the browser preview, and hit Refresh.
-
1:15
We're not seeing the background color that we applied to that wildlife div,
-
1:19
well that's because it doesn't have any of the box model components we
-
1:22
learned about earlier applied just yet.
-
1:25
So at the very least we'll need to add the content area.
-
1:29
And we can do that by selecting and
-
1:31
uncommenting the h2 and paragraph elements inside the wildlife div.
-
1:36
So I'm gonna select the content and hit command forward slash on Mac or
-
1:41
control forward slash on Windows to uncomment it.
-
1:44
And when we do that, we're now able to see the background color applied to
-
1:49
the wildlife div since the content area is no longer empty.
-
1:52
[BLANK_AUDIO]
-
1:54
So now that we have the content area of the box,
-
1:57
let's add the padding area with padding properties.
-
2:01
We can define values for padding as any length or a percentage unit.
-
2:04
And there are two different ways we can set the values for padding.
-
2:08
The first way is by setting each property individually.
-
2:11
So let's go back to our wildlife rule and let's start by setting the top padding by
-
2:17
typing padding-top and let's set the value to 100 pixels.
-
2:24
Next we're gonna set the right padding by writing padding-right.
-
2:30
And let's set this value to 120 pixels.
-
2:33
Right below that we'll set the bottom padding by writing padding-bottom and
-
2:39
let's also make it 100 pixels.
-
2:41
And finally let's set the left padding by typing padding-left and
-
2:46
we're gonna make the left padding value 120 pixels.
-
2:51
So here we're using four separate padding declarations.
-
2:55
One for each side of the div.
-
2:57
So when we save our stylesheet and
-
2:59
refresh the page, we're able to see the padded space around the content area.
-
3:03
And notice how the padding is applied inside the div, not outside.
-
3:08
So to avoid having to write a separate declaration for
-
3:12
each side of the div, we can use the shorthand property for
-
3:15
padding which lets us set the padding on all four sides in one declaration.
-
3:20
So right below the individual declarations, let's type padding and
-
3:26
then start setting the values with the shorthand notation.
-
3:29
So in our shorthand padding value,
-
3:31
if we only define one value, the padding is applied on all four sides.
-
3:37
So if we make the padding value 100 pixels and refresh the browser,
-
3:42
the wildlife div now has 100 pixels of padding on each side.
-
3:47
Now, if you go back and define two values in the shorthand notation,
-
3:52
the first value is applied to the top and bottom sides of the element.
-
3:57
And the second value is applied to the left and right sides.
-
4:00
So, if we make the second value 120 pixels,
-
4:04
when we take a look at our div, once again.
-
4:07
Now, the top and bottom sides have 100 pixels of padding,
-
4:12
while the left and right sides have 120 pixels.
-
4:17
So if we go back to our shorthand value and define three values, the first value
-
4:22
is applied to the top side only, the second value is applied to the left and
-
4:28
right sides, and the third value applies to the bottom side only.
-
4:33
So let's make the third value 200 pixels and
-
4:37
if we take a look at it again and refresh you can see that now the bottom side of
-
4:42
the div is the only side with 200 pixels of padding.
-
4:47
So finally when we define four values in our padding shorthand the first
-
4:51
value applies to the topside, the second value applies to the right side.
-
4:56
The third will apply to the bottom side and
-
4:59
the fourth value applies to the left side.
-
5:02
So let's make the fourth value 120 pixels, and
-
5:06
let's set the third value back to 100 pixels.
-
5:10
Now it's important to remember the short hand order values.
-
5:13
Because the same orders used on other shorthand properties,
-
5:16
we'll get to shortly.
-
5:17
So remember, the order of values is top, right, bottom, left.
-
5:22
Think clockwise.
-
5:24
So now we can actually go ahead and
-
5:26
remove these individual padding declarations above and since our top and
-
5:32
bottom padding values are the same and our left and right values are also the same,
-
5:37
we can actually define our padding with two values.
-
5:39
So instead of these four values, we can simply write 100 and 120 pixels.
-
5:46
Finally, for this particular div, I like to define a fluid padding valley using
-
5:51
percentages and we'll see why this method is going to be beneficial to us later.
-
5:56
Now when defining a top or
-
5:58
bottom padding using a percentage value, it's important to understand that
-
6:02
the percentage is relative to the total width of the container not the height.
-
6:07
So if we go back to our padding declaration and
-
6:10
change the padding value to 18% and 24%,
-
6:16
our new value will now apply 18% of top and bottom padding.
-
6:22
Based on the total width of the wild life container.
-
6:25
And it will also apply 24% to the left and right sides also based on that width.
-
6:31
So now when we save our style sheet and
-
6:33
go back to the browser, if we resize the browser window, notice how
-
6:38
the padding on each side of the div adjusts to the wildlife container's width.
You need to sign up for Treehouse in order to download course files.
Sign up