Padding in CSS

Jesse Caine
A free video tutorial from Jesse Caine
Professional Web Developer
4.4 instructor rating • 3 courses • 39,476 students

Learn more from the full course

CSS Master Course: For Beginners

Create stunning layouts using CSS3

16:57:57 of on-demand video • Updated June 2019

  • Learn how to use CSS to create beautiful websites
English [Auto] In this video I'm going to cover the padding part of the box model. So let's let's go back here and I had an H1 there and let's just make it say the box model and let's create a rule for the each one. Let's give it a background color of blue and color of white. That's just so I could see the I could see the text on the blue OK. So basically what you could see that the like I explained in the last video this is a lot bigger than it needs to be. But it's like that because the block element and you get to that in a couple of videos. But for now when I look covering the padding so what if you wanted there to be a bit more blue area on top and bottom of the padding of the element I mean. So what you could do is you can come here and go to padding and there is a bunch of ways to apply padding. I'm going to get through them in this video one at a time. But first is just the shorthand padding 88 pixels which will put 88 pixels of padding on all sides. So what will also happen here is there'll be a bit of padding before the tech starts and I'll also be on the end. But it's not going to be noticeable because it's going to be the same thing. But right here it's gonna be padding on top and bottom and the techs are going to be pushed over a little bit. Let's see that. OK. So you see what I mean. This is a lot of padding actually. I didn't realize how much that was but I mean I guess it does get the point across. So yes. So this is basically padding. It just makes the element bigger and the text will never seep into the padding. Everything inside the all the text will always stay in the content box so the padding is going to always be outside the text. And I guess for the rest this video now that you you basically must have an understanding what padding is now is I'm going to go through the different ways to apply the padding. So this applies it to the top the top bottom left and right. What if you wanted to have different values for the top and bottom than you did for the left and right. Well you could also do padding and supply two values. The first value let's do 48 pixels. The second value will be for the left and right. OK. So this is you setting 48 pixels to be the top and bottom and zero for the left and right. Let's see this. So you see the texture got pushed over a bit. OK so what if you wanted to have different values for all four. Well you could do. OK. So this is going to be a bit hard to to memorize but I'm going to give you a couple tricks to memorize them. You could You could have four values so you could have 48 pixels. Then let's do zero and 18 and six. So the 48 is the top the top then the rest basically go through clockwise so clockwise means first it's going to get to the right and then it's going to get to the bottom. That's this. And then it's gonna get to the left. Another way you could remember this is the word trouble take off all these vowels you know make them smaller. So t RB L T RBA like trouble Top Right Bottom Left. So if you ever forget this is trouble. Top Right Bottom Left. Let's look at this so there's only there's a lot of padding on the top there is a bit more on the bottom but while not not more than the top I mean there's a bit more padding on the bottom than there is on the left. That's because they're six pixels on the left. How much should I put. Eighteen eighteen pixels on the bottom and you could actually inspect this click on it. So if you look at the padding it says forty eight eighteen six and there's a dash here on the right side. It's not specified and so here is the user agent's style sheet. But here's our style sheet. You can actually see the. It was reading our previous styles that we commented out or we didn't come at them out but it comes after. So that's why those lines to them here you disable them so if you disable the color it'll be black. So that's what I meant in the last video. I think I explained how in the inspector you can change some of your styles without having to go back to the code editor of course once you at once you're happy with how something looks. You'll have to go back to the code editor to finalize it. If you do 30 to decide that you like 30 to better then once you refresh the page it'll go back to 48 because that's what's written here. But if you want to change the Sex Pistols. So this is the left you can do 100 something like that but then yeah once you refresh the page it defaults back to this. OK. And there's actually more ways to apply padding and one of them is with three values. And this one's a bit easier to understand than the other one. So let's do 48 pixels and 0 and 18 and this is actually really common to use. I use this one more than I use this one because what this does is it sets the top. And the second number is the left and right. And the last number is the bottom. The reason why this is useful is because it's really common to want to have a different value for the top and the bottom while having the same values for the left and right. So if you just put twelve pixels this would put four eight pixels on top twelve pixels on the left and right. And 18 on the bottom. Let's see this. So you see twelve twelve forty eighteen. OK. And the last way of applying padding is probably the simplest way actually. And that's just by doing it one at a time. And the like. Let me just show you padding bottom. Let's just say zero. So this is really useful sometimes when you want to I should put a semicolon there. It's useful for when you want to just turn set like 48 padding on all sides except for one you could do that by doing padding and putting four values in there like this. You know I just explained this bit like this. But another way is just to put 48 pixels all around and then set the specific side you want to be zero. It's just a bit more readable that way like this. This will put 48 pixels on the top left and right but well it will put padding on the bottom two. But then when you get to this code it will basically overwrite the last one. So there'll be no padding on the bottom like that see no padding. And you can do that for all the values the left right top. So that's basically going to be it for this video. That's a go. This is like OK. All right. So that's it for this video.