8.2 Margins, padding, and borders - Video Tutorials & Practice Problems

<v ->In this section, we're going to talk about</v> three of the most important aspects of the box model. These are the margin, border and padding, and there's something that can get pretty confusing about this. Isn't there Lee? with respect to the width especially- <v ->Right and so, in the introduction to this section</v> when we said this is the box model is a a subject that people find really frustratingly confusing. This is basically what we're talking about. So you can see in this diagram we have an inline style on- <v ->Right. There's like a width of 200 pixels here.</v> <v ->Yeah. On this hypothetical one</v> and then a padding of 40 pixels a border of 10 pixels and a margin of 20 pixels. And you'd imagine that because you said I want this element to be 200 pixels that it would be 200 pixels, but it doesn't work. <v ->Right.</v> <v ->That doesn't, it doesn't work that way.</v> So what actually happens is that border and padding are considered a part of the element. And because we've got 10 pixels of border on the left 10 pixels of padding on the left and then on the right we've got, I mean, 40 pixels padding on the left and then on the right, we've got another 40 pixels of padding and another 10 pixels of border. If you add all of that up the whole element ends up being 300 pixels in width. <v ->Right, so there's like 50 extra pixels-</v> <v ->On each side</v> <v ->on each of left and right.</v> And so that's a hundred total and add that to 200 and we end up with 300. <v ->Right. But margin doesn't count this way.</v> So margin is the space between elements but even margin gets weird. So, we'll cover this later when we talk about margin collapsing. But if you have two, a top and a bottom margin that are next to each other, it doesn't add both of those together, always. <v ->Weird.</v> Sometimes it just picks the bigger one. And we'll talk about when that happens. <v ->Yeah.</v> <v ->But it's just another one of those weird things.</v> So margins, aren't always considered like a complete part of this, of each element. So sometimes they can have some different behaviors but yeah, this bit about, you know, giving something a width and having it be much bigger than you thought you were making it, is something that's really confusing. And I think instead of just looking at a diagram probably the best way to understand what's going on is to actually build some test elements on the page just to see the difference. <v ->Okay. Yeah, let's do that.</v> All right. Let's add some test elements here and we're just gonna put them under the H two. <v ->Yeah. Just-</v> <v ->and I'm gonna give this what, this is a test box</v> and let's give it a little content. This, this is our prediction. Once we have the CSS, this will become true. This can be 200 pixels wide and then give another one here. <v ->And in writing this section, then, also kind of use this</v> as a opportunity to show how you can chain together a whole bunch of different classes. So that's why, by the time we get to the third example here it's gonna have a whole lot of text in the class section. <v ->So I got overly ambitious here with</v> my hope that the tab trigger would work. So that didn't work. Let's just do this one here. And I wasn't sure if that would work. It did not. So that automatically puts the class in I just type div then dot the class. Notice that that is the same notation that we use here, right, with the dot indicates a class. So in order to have two classes though, just separate them with a space and then this test box, what is it gonna be? It's gonna be 200 pixels wide, plus we're gonna add some border and some padding, it'll end up being 300 pixels. And then the final one, actually it's the same two classes initially. And then there's a third. This is one of the nice things about CSS is you can do these sort of interactive tests where you can just put things on and and fiddle with the settings. So this is 200 pixels wide plus a border, plus padding, plus box sizing. <v ->Right. And this is a CSS style</v> that we haven't discussed yet but- <v ->Yeah.</v> <v ->It is actually very handy and useful.</v> <v ->Yeah, I actually didn't note about this one.</v> All right. So this is the text now. This is a good example. We just have these divs just didn't do anything but at fault, but now we've got the divs in classes in place and we can add some style. So we're gonna end up deleting these. I'll just put them at the bottom here. So the test box let's give it a background color so we can distinguish it. And let's do this, 9db6dd. You probably just used a color picker for that. <v ->Correct.</v> <v ->Actually, let's take a look, does that work?</v> Oh, look at that. It's the whole thing. <v ->Right, cause-</v> <v ->Oh yeah, so all three of them have</v> the test box class, right? <v ->Yep. So we're building this in a cascading style.</v> So that- <v ->Yeah. Great, so the background now is</v> on all three of them and let's give this one a width of the predicted 200 pixels. <v ->Actually. It'll be all of them will have the 200 pixels.</v> <v ->Oh, that's true.</v> <v ->Yeah.</v> <v ->Right. Initially. So, so we've made a lie</v> out of this 300 pixels and I guess this is true but it will be false in just a moment. Okay. It looks like they're all just one element right now, but- <v ->Right.</v> <v ->We can change that by adding</v> on some other attributes here, some other values. So why is this called no sizing? <v ->Because we're not using the box sizing.</v> So this, this will be the full default box model behavior. <v ->Okay.</v> <v ->And then the</v> box sizing CSS property that we were just talking about. <v ->Oh, I see.</v> <v ->That affects the rendering of the box model.</v> <v ->Got it.</v> <v ->So that's why.</v> <v ->Ah, look at that. Okay.</v> So now these two, these, the second and third divs have this border and let's give it a padding as well. So this is 10 pixels of border. We talked about this just- <v ->Yeah.</v> <v ->Now with the diagram, 10 pixels</v> and then 40 pixels padding so that's 50- <v ->On each side on.</v> <v ->On each side.</v> <v ->And there you go.</v> <v ->Right. So now this one actually is 300 pixels wide.</v> <v ->Right. And so you can see the difference</v> between the bottom two and the top. So, the top one is 200 pixels. <v ->Right.</v> <v ->And the box model causes the whole element to expand out.</v> <v ->Yeah.</v> <v ->When you add in that stuff, but you can control how</v> the box model renders with this box sizing. So if you go back and we add a final class and we set box sizing to border box what this does is it forces the browser to draw those elements the way that you would imagine it would work which is all of a sudden, if it has a width then it draws the borders and the padding inside of that width. <v ->Right. So, and we can see that it is 200 pixels</v> <v ->It's 200 pixels, right.</v> So it subtracts the content space or it subtracts from the content space to draw the border and the padding. It's a really handy style to use. Some people actually go in and set it to set all block elements to have that just because they don't wanna have to think about the fact that the traditional default box model has this funky behavior where borders and padding cause it to expand. I don't like to do that because it it slows down page rendering. If you apply a style to everything to every element on the page. So I just pick and choose which ones. But yeah, it's really handy for doing page layouts because when you, when you're laying content out and you say you want like a main area with text in it to be exactly some number of pixels you don't want the margins and padding to affect that. So that's when you set box sizing the border box and it keeps everything inside of that. <v ->Is there a way to change the color</v> of the padding to see where it is? <v ->No. So, padding-</v> <v ->There's no way.</v> <v ->There's no way to change the color of padding</v> because padding is part of the content. So it, it takes on the property of whatever's behind the content. You're just saying, I want some extra space- <v ->Yeah.</v> Between the content and the edges of the element. Yeah. It's, there's no difference there. <v ->Right.</v> So it's just adding extra space around the text here. <v ->Right. I mean, there is theoretically</v> there is a way to do it. Using one of the newer CSS properties called box shadow which allows you to add, you know a drop shadow onto an element or an inset shadow. And so you can actually do it that way. We'll talk about box shadow later in the tutorial when we're styling up the menu. <v ->Okay.</v> <v ->But, with that you can actually set</v> an inset different color. <v ->Cool.</v> All right, now that we've gotten an idea about how bordering and padding work. Let's take a look at the third one we mentioned, which is margin. And this one gets a little strange, right Lee? <v ->Yep.</v> <v ->You mentioned this before can get a little weird-</v> <v ->Right.</v> <v ->So let's take a look at a diagram.</v> Explain how margins work. It seems like there's this subtlety especially when they're one on top of the other. <v ->Right. So you, you'd always expect margins</v> to push elements away from other elements. So you would think then that if you had a top margin and a bottom margin set on two elements that touch each other. Like on the left, that they'd always combine. So imagine that, that this top left element has a margin bottom of 50 pixels. And this bottom element here has a margin top of 50 pixels, you'd imagine, oh, well they're pushing away from each other. So that's a hundred pixels of space. And interestingly on non block elements, that is the case. So if we tweak our- <v ->We have an example of that, right?</v> <v ->Huh?</v> <v ->We have an example of that?</v> <v ->Yes. We do.</v> <v ->So that's on our test box.</v> We're gonna give it an inline block display which we talked about in the last section. <v ->And then-</v> <v ->And then we're gonna give it a margin actually,</v> how does that affect it? I'm just curious to see, ah, that. Okay, so remember all, yeah. All three of these elements have that. So now, now they're inline, but we still have the the ability to put on padding and and border even on the top and bottom- <v ->Right.</v> <v ->Because it's inline block. Okay. And then</v> <v ->So we're gonna give them all a margin 50 pixels.</v> <v ->Right. And so the, as with the padding</v> this applies it in all four directions, right? <v ->Right.</v> And then just to make one be on the bottom we're gonna set the test box sizing. <v ->Yeah.</v> <v ->The last one to display block.</v> And we're also gonna remove the width styling and this is something we haven't shown but width auto will reset a width styling to just be whatever the browser default for this element should be. <v ->Okay. Well, let's just, I'm gonna comment these out.</v> I wanna just do what things one at a time. <v ->Sure.</v> <v ->So we've added the margin.</v> Okay. So now this is like a 50 pixel margin around each of these, right? And then what happens if we make this display block here without the width auto? So the text box sizing is just the third one here. <v ->Yeah.</v> <v ->Okay. So now-</v> <v ->Which works to illustrate the concept</v> but we want to just make it a little easier to see so that it stretches all the way across the window. <v ->Right. So with auto it makes some</v> it's an automatic width on the left and right. So that, oh, look at that. <v ->Yep.</v> <v ->Okay, so it kind of stretches across now,</v> the reason there's space here is because of the margin, right? <v ->Correct. So if that margin is-</v> <v ->If we get rid of that margin</v> then it would just, it should be just right up against- <v ->Exactly.</v> <v ->The sides of the browser.</v> <v ->The margin pushes it away from the edges of the browser.</v> <v ->This is great.</v> I mean, I'm learning stuff here too. And this is really the kind of thing that you can do in a screen cast. It's so much harder to do this sort of thing. It'd be really tedious in text- <v ->Right, to play around with all</v> the different permutations of it. <v ->Right, to play around with it in the video.</v> <v ->So right here, what we're looking at on the,</v> on the browser is we're looking at the the left hand version of the figure that we showed at the beginning or of this conversation. <v ->Okay. Yeah, so this is our scenario.</v> <v ->Right. So, we're on the left hand thing here where-</v> <v ->Right.</v> <v ->We have two inline block elements.</v> So the first two boxes. <v ->Yeah.</v> <v ->And we have one block level element</v> and you can see that there is a 100 pixels of margin between the one on the right. On the top and the one on the bottom it's- <v ->Right, so there's 50 pixels here.</v> Another 50 pixels here. <v ->Yeah.</v> <v ->To make a hundred.</v> And the same thing here, this is 50 pixels here. Another 50 pixels here. <v ->Exactly.</v> <v ->So this is behaving as we intuitively might expect.</v> <v ->Right. So,</v> <v ->Okay.</v> <v ->You think of those margins</v> as being kind of like physical objects and in the real physical world, you know, it's not too often that you have two objects that pass through each other. <v ->Right.</v> <v ->Which is exactly what's gonna happen now.</v> <v ->Okay. So we're gonna remove these display settings.</v> Let's just do them one at a time. What's the right order? Should we get rid of this one first? Maybe? <v ->Yeah.</v> <v ->Okay. And do we get rid of the width too?</v> I guess we should. <v ->No, just leave the, oh, you can get rid of that one.</v> Yeah. We're gonna get rid of that one. <v ->It doesn't do anything, right?</v> I mean, if we, I don't think it'll change it, right? <v ->No.</v> <v ->Once it's not a, yeah.</v> Once it's not a block anymore. So, so the reason this isn't a block is because it's inheriting this or it's cascading down. <v ->So now we're gonna get rid of both-</v> <v ->Test box is inline blocks.</v> So we're gonna get rid of this one too, right? <v ->Yep. And also the width up there</v> so that they stretch all the way across the page. <v ->Right.</v> <v ->Just, just to make it nice and</v> and clear what's going on. So what you'll see is that each one of these is only separated by 50 pixels of space. <v ->Right. So like, if we, if we gave this a hundred</v> we could see what a hundred looks like. <v ->Yep.</v> <v ->So this is a hundred pixels here.</v> <v ->Yep.</v> <v ->But so this is 50 and this is kind of weird</v> because we expect that this one has 50 on the bottom this one has 50 on the top. So 50 plus 50 is a hundred but somehow 50 plus 50 is equal to 50 here, right? <v ->Right.</v> <v ->So, so what is causing that?</v> <v ->So this is what's called margin collapsing.</v> And the reason that this is there is because in the old days of HTML, you, you'd have to give margins to default elements like paragraphs and stuff like that to keep the content away from other things. So let's say you had a new paragraph and it came after an image. You'd always want a little bit of space between the image and the paragraph. <v ->Okay.</v> <v ->But what you wouldn't want would be two paragraphs</v> next to each other to have double the amount of space that you have between the paragraph and the image. <v ->Right.</v> <v ->So what they did was they made it,</v> so that two just generic block elements that both have margin that conflict with each other like this, it just takes the value of the largest margin. <v ->Oh, okay. So if one were</v> like 50 and the other were a hundred then- <v ->Right.</v> <v ->Interesting. So if, let me just see if I understand this.</v> So if we put- <v ->Do the no sizing. Yeah.</v> <v ->This one here?</v> I'm just gonna put like a hundred pixels here. Okay. So now it's taking the larger of the two. <v ->Yep.</v> <v ->Interesting.</v> <v ->But notice it's, it's still only a hundred pixels</v> between the two bottom elements. It's not 200 pixels. <v ->Right, not 200.</v> Oh, yeah, right. That makes sense. Interesting. All right, Well, this gives us a good overview about margin padding and borders. We will be using these more in later parts of this tutorial for actual styling, but we wanted to get some of this stuff out of the way, using this sort of clinical approach where we have these test elements to really be able to drill down and find out how these different pieces behave. <v ->Right. And to see some of the weirdness of the box model</v> that might be a little counterintuitive. <v ->Right. But so unless you're doing the exercises</v> at this point, we recommend getting rid of this stuff. So, either now or after doing the exercises we're gonna remove these test dials and remove the test, ISS that. All right. Let's take a look and we're back to where we were.