8.7 Padding … not just for chairs - Video Tutorials & Practice Problems

<v Narrator>Now that we've looked at margins</v> in more detail, we're gonna take a look at the closely related padding in more detail as well. But we'll discover that, unlike margins, padding is really straightforward, there aren't a lot of weird exceptions. <v Instructor>Right, the form for it is very similar</v> to margin in that the style allows for compound values so it can be the exact same as margin, where, if you're styling the top, right, bottom and left- <v Narrator>Right, so let's take a look at-</v> <v Instructor>And the same shorthand applies.</v> <v Narrator>Yeah, so we're gonna style the bio boxes here,</v> with padding, so it goes here. Right, so we've seen padding before if we did something like, 10 pixels, and would apply it all the way around. So if I refresh, okay, actually I'm gonna give it like 30, I just really wanna see the effect. So what is it doing, it's pushing in. Right, so why is it not affecting like the space here? <v Instructor>Well, this was actually,</v> you put it on the H3- <v ->Oh, I put it on the H3.</v> <v ->Yeah.</v> So you pushed the H3 out of the image and then added extra padding. <v Narrator>(laughing) I didn't even notice.</v> Yeah, okay, so let's put it in the right place. We wanna put it in the, just the regular bio-box. <v Instructor>Right, yeah.</v> <v Narrator>I mean, that's useful though,</v> to know that, yeah, if you do it in the wrong place then it'll have weird effects. <v Instructor>Yep.</v> <v Narrator>So this is something I like to do sometimes,</v> like just give it an extreme value and then if it doesn't do what you expect, then you know at least, I mean, something is happening or it's like something should be happening. Sometimes, you know, TSS doesn't do anything. Okay, yeah, see, now that's what I expected, I expected to kind of squeeze it in. <v Instructor>Yeah, that did a lot of squeezing.</v> <v Narrator>So if I did, you know,</v> do like 60 pixels should squeeze it in more, yeah. <v Instructor>So let's choose something</v> a little bit less than that and let's see how it looks with 2%. <v Narrator>Okay, so this is 2% on the,</v> let's see, we're gonna do no padding on the top and then we're gonna do 2% around the bottom and the right and the left. So we can do this, is this right? <v Instructor>Yep.</v> <v Narrator>And we can do this.</v> So I just wanna start with the short hand again, this is top right, bottom left. Yeah, and we can see at the top here that it's right flush at the top, so we could make this a 2%. So now this would be the same, this would be the same as just like this, if we just did this, right? <v Instructor>Yep.</v> <v Narrator>Okay, so that's 2% all the way around</v> but if we want 2% everywhere except the top, then we can do, we can do this. And then there's the shorthand where we can remove this and it automatically just has the 2% from the right. So this is left that I deleted and this is right, here. <v Instructor>Exactly, and remember that 2%</v> isn't 2% of the browser size- <v Narrator>Oh, it's just 2%?</v> Yeah, I wondered about that. <v Instructor>It's 2% of the size of the parent container</v> which we constrained to a max width of 960 pixels. <v Narrator>Right, so that's the bio-wrapper.</v> <v Instructor>Right.</v> If we actually wanted to make it 2% of the browser, we could use something like, view width, <v ->Okay, that's the-</v> <v ->and it would be bigger.</v> <v Narrator>Got it.</v> Yeah, so this is 2% of this here? <v Instructor>Right.</v> <v Narrator>So this is 2% of 960 pixels</v> and so 1% of that is 9.6 pixels, so twice that is like, what would be 18, 19.2? <v Instructor>Yeah, and actually decimals work.</v> So you could put that in. <v Narrator>So 19, 18 point,</v> you can have a fractional pixel? <v Instructor>Yes you can.</v> It can often make for some very odd positioning, but- <v ->Huh, look at that.</v> <v Instructor>Yeah.</v> <v Narrator>Cool, so you can see</v> why you'd rather use percentages though. It's definitely more convenient. Great.