8.6 Margins for boxes - Video Tutorials & Practice Problems

<v Presenter>Right now that we've got</v> these links all lined up, let's take another look at these boxes that are lined up nicely, but if you look at them, they're kind of pushed up against each other. So what we're going to look at in this section is margins, which are our way of creating space around the outside of the box. Is that right Lee? <v Lee>That's correct, so it's the space between elements.</v> <v Presenter>Okay.</v> So let's take a look at the simplest kind of margin declaration. We've seen this before, but we're gonna dig a lot more deeply into the subject in this section. Where do we have margins before? <v Lee>We talked about margin collapsing.</v> <v Presenter>Right, and we actually,</v> we briefly dealt with it before with the hero, right? <v Lee>Yes, that's true.</v> <v Presenter>Margin zero.</v> So this time we're going to look at these bio boxes and we're gonna add a margin and it's after the font size here. And let's just put on 20 pixels. You like to use pixels for margins? <v Lee>Just in this case, yes.</v> <v Presenter>Okay.</v> <v Lee>It really depends on what the purpose is.</v> <v Presenter>Okay, ah, yeah.</v> All right, well, so it gave us some space here now, but the fourth box is now spilled over again. What happened there? <v Lee>Well, this is our old friend, the box model.</v> <v Presenter>Yeah.</v> <v Lee>And if you'll remember,</v> margin is not counted as a part of the element. <v Presenter>Right.</v> <v Lee>So even though we've set box sizing</v> to be border box for all of these, so the borders and the padding are calculated to be inside of the width margins are outside of that. So that means we have to calculate and figure out how much margin we can add into the page without breaking the elements down. <v Presenter>Yes.</v> <v Lee>So we gotta do a little bit of math to make this.</v> <v Presenter>Yes, so here,</v> 'cause we basically got 20 pixels around each side, to margin 20 pixels just sets the margin around the whole thing. <v Lee>Right and we were already at 100%</v> of the width with the boxes. <v Presenter>Right so it was like 20 plus 20 plus</v> another 20 plus another 20. <v Lee>Exactly.</v> <v Presenter>80 pixels of space or so.</v> <v Lee>Exactly.</v> <v Presenter>And it's then spilling it...yeah,</v> so it's pushing it down. All right well so, how can we do this? <v Lee>Well, we already sized the boxes using percentages.</v> <v Presenter>Yeah here they are.</v> 25% right? <v Lee>Right so the easy way to do this would be</v> to use percentage margins. <v Presenter>Okay, so...</v> <v Lee>So what if we set it to 3%?</v> <v Presenter>Okay.</v> So it's 3% of what? 3% of? <v Lee>The width of the page.</v> <v Presenter>Okay, well, so it's still</v> not fitting though. <v Lee>Right.</v> <v ->It's because,</v> this is 25% and then we have the 2% doesn't count though right 'cause that's the padding that's inside. <v ->Correct, the padding is on the inside.</v> So that doesn't count. <v Presenter>And is it only</v> because it's border box that it doesn't count? <v ->Right yeah.</v> <v Lee>Okay.</v> If we were to remove border box, then. <v Lee>That would,</v> <v Presenter>the padding</v> and the border would both count. <v Lee>Also true.</v> <v Presenter>Right, got it.</v> Yeah this box model stuff is pretty complicated. Like I'm not just saying that to say, "Oh, let's make up a conversation." Like I really am learning a lot about the box model even now, (Lee laughs) even having already edited this chapter. Like if you're like, "Hey, I'm getting it." It's like, "Yeah." I didn't know about border box. I don't think, <v Lee>Yeah it's one of those things</v> that for a long time, this was a big difference between the browsers. So the standards compliant browsers, meaning like Chrome and Safari and Firefox, they did everything the way that the CSS spec says it should be, which is the not box-sizing way. So it means like the padding and the borders are added onto the width. <v Presenter>Yeah.</v> <v Lee>But out of all the browsers, Internet Explorer,</v> did all of its box sizing (Presenter laughs) this way as though they were all border box. <v Presenter>Oh (sighs).</v> <v Lee>So you would have elements</v> that would be smaller on Internet Explorer (laughs) than they would be on other ones. <v Presenter>I remember that, I remember like basically you</v> would design everything to get it working perfectly on every browser and then spend like an equal amount of time getting it to work on Internet Explorer. <v Lee>Right yeah and trying</v> <v Presenter>It's better,</v> it's better now. <v Lee>Yeah.</v> <v Presenter>But yeah.</v> Okay well, so let's see if I can figure this out then. We've got, we don't have to talk about border, and padding here because we have the border box. Those don't count toward the 100% but this 3% does, and since it's 3% around the whole thing, in particular left and right, there's 3% here and 3% here, which is 6%. So if we subtract 6% from this 25%, it should fit. <v Lee>That's correct.</v> <v Presenter>See if that's right.</v> Aha. <v Lee>Look at that.</v> <v Presenter>There we go yeah.</v> That is great. So it's almost too bad you can't just have a programming language that says like, "Take this number and subtract twice a bit from this number." <v Lee>Well guess what?</v> (Presenter laughs) That actually probably is calculations are a part of newer CSS specs. <v Presenter>Really?</v> <v Lee>It is not always fully supported.</v> (Presenter laughs) So that's why it's not part of this tutorial. <v Presenter>Right.</v> <v Lee>Variables are also a thing that is in the spec,</v> but not fully supported so... <v Presenter>Yeah.</v> <v Lee>Later versions of this tutorial</v> will need to cover those. <v Presenter>Yeah.</v> <v Lee>But for right now it's all too new.</v> So gotta wait and see how everything shakes out. <v Presenter>Yeah that seems like a theme.</v> <v Lee>Yeah.</v> <v Presenter>All right so this margin 3%</v> it's really a shorthand, isn't it for four things? 'Cause. <v Lee>Right.</v> <v Presenter>There are four sides to this box.</v> <v Lee>Right?</v> So this is actually a lot like the border, which we were discussing in one of the previous sections. <v Presenter>Yeah.</v> <v Lee>Where this is a compound style declaration.</v> So the value is actually, in the case of margin, four different values. <v Presenter>Right so let me type these in.</v> This is really margin top, 3% and then the same thing for, so margin top right, bottom and left. <v Lee>Mm hm.</v> <v Presenter>So this should be the same, right?</v> <v Lee>Yep.</v> <v Presenter>So basically this margin 3% is kind</v> of a shorthand for this? <v Lee>Right.</v> <v Presenter>In effect.</v> And then, this is something I did know about. So I knew about the margin, these different margin top right, bottom left and then there's also a system that... <v Lee>You can put all of those on one line.</v> <v Presenter>Yeah you can do this.</v> This is equivalent and it's in this order. It's top right, bottom left. <v Lee>Correct so you're starting at the top.</v> Think of it like a clock. <v ->Yep.</v> <v Lee>You're starting at 12 o'clock</v> and you're going clockwise around right. <v Presenter>Yeah that's how I always thought,</v> I can put my hand in front of my face and I go top right, bottom left. <v Lee>Yep.</v> And then as we talk about in the text, there's actually an additional element to this, which is that if things are the same, they can be collapsed. So if we were to change this to a different number, like let's say 10%. <v Presenter>Okay.</v> <v Lee>on the top and 10% on the bottom.</v> So we've got our top and bottom are 10% and our left and right are three. So what happens is we can shorten this. <v Presenter>Yeah well actually let's take a look at it.</v> We'll see a change in distance between these elements, right? <v Lee>Mm hm.</v> <v Presenter>Yeah but not the horizontal spacing.</v> <v Lee>Right.</v> <v Presenter>And so then you were saying,</v> we can actually just delete those. <v Lee>Right.</v> <v Presenter>Like that.</v> And that's the same. <v Lee>So.</v> <v ->Yeah, you gotta think of the top</v> and the bottom as partners and the left and the right as partners. <v Presenter>Yeah.</v> <v Lee>And if the partners are the same,</v> then you can just shorten it to a shorter shorthand. <v Presenter>Okay yeah, I think we actually,</v> we have a diagram for that, like this, yeah. Right so basically 40, 30, if you leave off the other ones, then it just fills it in. <v Lee>Exactly.</v> And then there's actually even a three number version of this. <v Presenter>Okay.</v> <v Lee>Which is...</v> <v ->How does that work?</v> <v Lee>Just so you see it.</v> <v Presenter>I have a feeling this one</v> is used a little less often. Maybe I'm wrong. <v Lee>Not really because what usually happens</v> is there are a lot of times where you have your top and bottom different, but your left and right are the same number. <v Presenter>Okay.</v> <v Lee>So in this case, if we wanted a top margin of 40,</v> a left and right of 1% and a bottom margin of zero. <v Presenter>Okay.</v> <v Lee>We can leave off the last one</v> 'cause that would be styling the left hand margin. <v Presenter>So do 1%.</v> <v Lee>It's gonna be 1%.</v> <v Presenter>Yeah right.</v> <v Lee>So it, this actually is not that uncommon.</v> <v Presenter>Really, interesting?</v> Right so this is top right, bottom and then. <v Lee>Left is inheriting from the right.</v> <v Presenter>Right 1%.</v> Yeah it's the same one as this one. And I noticed that we've done this before, but we don't need to specify the units when it's a zero, just... <v Lee>Correct, yeah.</v> <v ->We could say 0% that would be the same right?</v> But no. <v Lee>You could say</v> anything there, zero (laughs). Zero of whatever (laughs). <v ->Right, zero em, zero pixels or whatever.</v> <v Lee>But it's better to leave that off</v> just to save space. And then because we changed the left and right margins to 1%, we actually need to do math again. <v Presenter>Oh, right so it was 25% for each of them</v> and now instead of subtracting twice 3%, we're gonna subtract twice 1% so that's 25 minus two times 1% or 23%. Is that right? <v Lee>Mm hm.</v> <v Presenter>All right.</v> <v Lee>Okay and it fits</v> and eagle-eyed people will notice now that the margin is not equal between all of these things. So on the left hand side and on the right hand side, the margin is smaller than in the middle where the margin's being doubled up. <v Presenter>Right, right 'cause it's doubled.</v> <v Lee>Right so fixing that is actually a bit</v> of a tricky problem. We'll take a look at that later in the tutorial. <v Presenter>Hmm.</v> <v Lee>But yeah, it's just one of those things</v> you have to kind of deal with. <v Presenter>Okay.</v> <v Lee>But in addition to another thing</v> you have to deal with, there's also a totally different value that you can give to margin that has a counterintuitive result. <v Presenter>Okay.</v> <v Lee>So far we've been giving values</v> that are a unit of measurement, whether it's like percentages or pixels or something like that, but you can also give margin auto. <v Presenter>Hmm.</v> <v Lee>And this only works for left and right</v> and it only applies to elements that have a width. And what it'll do is, if the element has a width and you set margin auto, it will center the element on the page. <v Presenter>Okay.</v> <v Lee>So this is yet another way</v> of moving stuff around and centering things. <v Presenter>All right so let's take a look at that.</v> It's gonna go on the wrapper right? <v Lee>Right.</v> So what we're gonna do is we're gonna make all of these biographies take up a little bit less space on the page and then have them be centered. <v Presenter>All right well so I just wanna see</v> what happens if we add margin auto. So that doesn't do anything <v Lee>Right.</v> <v ->Because you said we needed a width.</v> <v Lee>Correct.</v> <v Presenter>Right?</v> And so now this, I don't know if I've seen this one so far, this is max width. <v Lee>Right so max width will set the maximum</v> that it'll allow an element to stretch out. But if the screen gets smaller than that, it will allow the element to resize. <v Presenter>Okay.</v> <v Lee>As though it were just like a normal block element.</v> So there we go. <v Presenter>All right.</v> So let me, I just wanna understand this. So this... I see, so, ah, that's good. So this is what reaches its max with. <v Lee>Right and at that point it's functionally</v> like setting the width to be 960. Now watch, try, get rid of the max. <v Presenter>Yeah that's what I was gonna do.</v> And now. <v Lee>And now</v> <v Lee>Right.</v> So now it won't respond to the screen and you'll get these <v ->They squeeze down.</v> <v Lee>horizontal scroll bars.</v> <v Presenter>Oh, okay yeah, so that's not as good.</v> So if we do max width though, now they fit. That's cool. I did not know how to do that. <v Lee>That's neat.</v> <v Presenter>All right.</v> And there's one more thing I think is that for margin auto. So margin auto is basically its setting, I mean maybe just explain it again like, I'm not entirely clear on what margin auto means exactly. <v Lee>So it's distributing the margin</v> on either side of an element. <v Presenter>Okay.</v> <v Lee>So within a parent container or just the page,</v> it's distributing the white space. <v Presenter>Okay, and it's just horizontally right?</v> <v Lee>Only horizontally.</v> Margin top and bottom do nothing for margin auto. <v Presenter>Okay.</v> <v Lee>But yeah, like I said,</v> you have to have a width for it because it needs to know how much space to distribute. <v Presenter>So you could do something like this,</v> it's top if I did like 50 pixels. <v Lee>Mm hm.</v> <v Presenter>Top right bottom,</v> I could do like a hundred pixels. <v Lee>Yep.</v> <v Presenter>Like this.</v> <v Lee>Yep.</v> <v Presenter>Right so this will add stuff</v> to the top and bottom of this, but the horizontal dimension will be the same. Yeah there we go, cool. And I could probably just leave this one off couldn't I? <v Lee>You could.</v> <v Presenter>Right 'cause that's using the three,</v> one, two, three <v Lee>That's right.</v> 'cause it'll tear it, it'll just get the auto automatically. <v Lee>Good old shorthand.</v> <v Presenter>Ah, yeah, there we go</v> and if I wanted 50 pixels top and bottom and then auto, so this seems like it's something that's probably pretty common, giving it a margin <v Lee>Mm hm</v> top and bottom <v ->That's correct.</v> and then giving it to auto. But in this case we don't care about those, so in the sense, this is setting the top and bottom margins to auto, but it doesn't have any effect. Is that right? <v Lee>Right yeah.</v> <v Presenter>I got it.</v> <v Lee>Exactly.</v> There are a lot of people who are very disappointed to find out that margin auto does not vertically center things. (Presenter laughs) <v Presenter>Yeah 'cause that's really hard isn't it?</v> <v Lee>Yeah.</v> <v Presenter>Okay that's great.</v> All right so then there's one more kind of tricky thing about margins, which is that we can make negative margins. How does that work? <v Lee>Yeah so there are a few things</v> that you can use negative numbers for and margins happen to be one of them. <v Presenter>Hmm.</v> <v Lee>So what it means is</v> that you can move something outside of where it would normally appear on the page. So best way to give an example of this, we'll add some stuff to the biographies and then move around the titles. The interesting thing about this technique too, is that it actually leaves the size of the element that was there before and just kind of moves the... well you'll see. <v Presenter>Yeah okay.</v> <v Lee>It's a weird thing.</v> <v Presenter>So we're gonna gonna add these images is</v> from a website that I didn't know about that's pretty cool. It's called placekitten. It has a placeholder image, but you know, why have a normal like sort blank image when you can have a kitten? So I don't know what the g is exactly. <v Lee>I think that has something to do with the sizing.</v> <v Presenter>Okay and because the 400 is...</v> <v Lee>That's definitely the size.</v> <v Presenter>Yeah so let's just take a look at,</v> I just wanna look at one of these. Oh yeah look at that. Actually let me take a look at this. Okay take a look at placekitten. So it looks like, I'm not sure what the g is. Do you need the g? It's interesting it just says like this or like this, but it doesn't explain why the g is necessary. <v Lee>Hmm.</v> <v Presenter>Let's take a look.</v> Maybe we don't need it anymore. Maybe they fixed up their route so you don't need it. <v Lee>Yeah.</v> <v Presenter>No you do need it.</v> All right well for reasons unknown, there's a slash g in the placekitten URL there and let's add this to the other ones. So we're doing this. This is before the, the h3 right. So these would be like just real head shots. <v Lee>Exactly.</v> But easier to use placekitten. <v Presenter>Yeah.</v> All right, that's not what I expected in terms of... <v Lee>Yeah they're slightly too big.</v> <v Presenter>Yeah.</v> <v Lee>So we should constrain the size of those</v> with little bit of percentage CSS. <v Presenter>Yep we've actually got one more</v> for any future people. So yeah there are four kittens. Now why have three, when you can have four? (Lee laughs) 33% more kittens. Right so we need to add another piece of CSS that will constrain this 'cause these are really just kind of exploding outside of their boxes. <v Lee>Right.</v> <v Presenter>So it's gonna be in the bio styles,</v> just go to the bottom of these. Oh it's gonna be a bio box. So let's do that here. <v Lee>Right, right.</v> <v Presenter>And it'll be images associated with bio boxes</v> and now we're gonna give it a width that it's a 100% is that it's a 100% of the thing that surrounds it. <v Lee>It is a 100% of the content area of its container.</v> <v Presenter>Okay.</v> <v Lee>And I said that very carefully because...</v> <v Presenter>Right.</v> <v Lee>The padding will still apply.</v> <v Presenter>Ah, okay so let's refresh this.</v> Aha, that looks a lot better. And so why might we wanna use negative margin in this context? <v Lee>Well let's just say we wanted</v> to position the names over the images. <v Presenter>Oh, like Michael Hartl, Lee Donahoe</v> <v Lee>Mm hm.</v> <v Presenter>Nick Merwin inside here.</v> So we're gonna like kind of pull them up. <v Lee>Yeah we're gonna drag them up onto the image.</v> <v Presenter>Okay so we've got bio box h3.</v> We already have, that's what these are, right? These are h3s? <v Lee>Yeah.</v> <v Presenter>Yeah so we're gonna give it</v> a negative margin right in here. So it's gonna be, and I guess we could, well, let's do a margin top, <v Lee>Mm hm.</v> <v Presenter>Let's do a margin top</v> of negative 40 pixels and see how that works. Okay so that pulled them in, they're they're the wrong color though now we need to. <v Lee>Yeah they're not very visible.</v> <v Presenter>Yeah.</v> <v Lee>But you can see it dragged everything up.</v> So it's like. <v Presenter>Oh yeah, everything underneath it too.</v> <v Lee>Right so in a future section,</v> we'll be talking about positioning. And if we were to use positioning to move those around and change its position from relative to absolute, which we'll get to, it wouldn't drag everything up. It would almost be like the header doesn't even count as being on the page. <v Presenter>Yeah.</v> <v Lee>So everything would move up even more,</v> the social links would overlap onto the image. <v Presenter>Ah, okay so this is just the margin top,</v> but we also want some margin on the bottom. <v Lee>Yeah let's push all that stuff that's there</v> down a little bit more, so. <v Presenter>Okay so let's do top.</v> <v Lee>We don't need any left or right.</v> <v Presenter>Right.</v> <v Lee>So zero and then we'll just do 1em on the bottom.</v> <v Presenter>1em and then we could put a zero here,</v> but we, we don't need to because <v Lee>Right.</v> <v ->It's automatic</v> <v Lee>And then let's align them center.</v> <v Presenter>Yeah that's another thing, I was like,</v> "These seems like they wanna be centered here." So how do we arrange that? <v Lee>All we do is text align center.</v> <v Presenter>Ah, good.</v> So that's then here. All right, we used that before with the social links. <v Lee>Right.</v> <v Presenter>Right where was that?</v> The social links? Yeah text line center. (Presenter types) Okay they should be centered after I refresh. All right that looks good. <v Lee>There we go.</v> <v Presenter>It seems like these negative margins,</v> even though it's kind of a weird thing to allow that can be quite useful. There there's things where there's just no other way to do it. <v Lee>Right, exactly.</v> It lets you move things up or left or right without having to change their position, which is a much more complicated thing that can affect things in a very different way. It's a very convenient way to just nudge something over just a little bit. <v Presenter>All right that's great.</v>