Padding

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