Now let's take a look at how the content area of an element is effected by padding.

So in our latest workspace, let's go back to our index.html file.

And we're gonna scroll down to line 18.

And let's give the div on line 18 the class wildlife.

And notice how currently the content inside our wildlife div is commented out.

We'll get back to that in just a bit.

So, let's save our index dot html file and go back to our style.css file.

And we're gonna scroll down to the bottom of our style sheet and

right beneath the layout styles section, we're gonna target the class wildlife.

[BLANK_AUDIO]

So first let's add a color property.

And we're gonna make the text color inside our wildlife.div white.

And we're also gonna wanna give it a background color.

One that's a lighter shade of black.

So to do that, let's add a background color property and

set the hex value to pound 434a52.

So when we save our style sheet and

go back to the browser preview, and hit Refresh.

We're not seeing the background color that we applied to that wildlife div,

well that's because it doesn't have any of the box model components we

learned about earlier applied just yet.

So at the very least we'll need to add the content area.

And we can do that by selecting and

uncommenting the h2 and paragraph elements inside the wildlife div.

So I'm gonna select the content and hit command forward slash on Mac or

control forward slash on Windows to uncomment it.

And when we do that, we're now able to see the background color applied to

the wildlife div since the content area is no longer empty.

[BLANK_AUDIO]

So now that we have the content area of the box,

let's add the padding area with padding properties.

We can define values for padding as any length or a percentage unit.

And there are two different ways we can set the values for padding.

The first way is by setting each property individually.

So let's go back to our wildlife rule and let's start by setting the top padding by

typing padding-top and let's set the value to 100 pixels.

Next we're gonna set the right padding by writing padding-right.

And let's set this value to 120 pixels.

Right below that we'll set the bottom padding by writing padding-bottom and

let's also make it 100 pixels.

And finally let's set the left padding by typing padding-left and

we're gonna make the left padding value 120 pixels.

So here we're using four separate padding declarations.

One for each side of the div.

So when we save our stylesheet and

refresh the page, we're able to see the padded space around the content area.

And notice how the padding is applied inside the div, not outside.

So to avoid having to write a separate declaration for

each side of the div, we can use the shorthand property for

padding which lets us set the padding on all four sides in one declaration.

So right below the individual declarations, let's type padding and

then start setting the values with the shorthand notation.

So in our shorthand padding value,

if we only define one value, the padding is applied on all four sides.

So if we make the padding value 100 pixels and refresh the browser,

the wildlife div now has 100 pixels of padding on each side.

Now, if you go back and define two values in the shorthand notation,

the first value is applied to the top and bottom sides of the element.

And the second value is applied to the left and right sides.

So, if we make the second value 120 pixels,

when we take a look at our div, once again.

Now, the top and bottom sides have 100 pixels of padding,

while the left and right sides have 120 pixels.

So if we go back to our shorthand value and define three values, the first value

is applied to the top side only, the second value is applied to the left and

right sides, and the third value applies to the bottom side only.

So let's make the third value 200 pixels and

if we take a look at it again and refresh you can see that now the bottom side of

the div is the only side with 200 pixels of padding.

So finally when we define four values in our padding shorthand the first

value applies to the topside, the second value applies to the right side.

The third will apply to the bottom side and

the fourth value applies to the left side.

So let's make the fourth value 120 pixels, and

let's set the third value back to 100 pixels.

Now it's important to remember the short hand order values.

Because the same orders used on other shorthand properties,

we'll get to shortly.

So remember, the order of values is top, right, bottom, left.

Think clockwise.

So now we can actually go ahead and

remove these individual padding declarations above and since our top and

bottom padding values are the same and our left and right values are also the same,

we can actually define our padding with two values.

So instead of these four values, we can simply write 100 and 120 pixels.

Finally, for this particular div, I like to define a fluid padding valley using

percentages and we'll see why this method is going to be beneficial to us later.

Now when defining a top or

bottom padding using a percentage value, it's important to understand that

the percentage is relative to the total width of the container not the height.

So if we go back to our padding declaration and

change the padding value to 18% and 24%,

our new value will now apply 18% of top and bottom padding.

Based on the total width of the wild life container.

And it will also apply 24% to the left and right sides also based on that width.

So now when we save our style sheet and

go back to the browser, if we resize the browser window, notice how

the padding on each side of the div adjusts to the wildlife container's width.