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