4.4 More margin tricks - Video Tutorials & Practice Problems

<v ->There are a couple more margin tricks</v> that are worth noting. One is that we can omit numbers if we don't need the rules for those directions. So let's take a look at the headers here. We'll start by hoisting this rule up into the header tag, as I promised we would. This applies to both. We can take a look. Didn't change. That's good. It's actually a good idea just to double check. I'm just gonna get rid of it for now. You can see, it really did the right thing. One of the things with these style rules is that it sometimes it's hard to figure out if they're actually being applied. So sometimes I'll do something like I did in the last section where I have a big margin like a hundred pixels, or I'll turn something red just to make sure that it's actually being applied. Cuz sometimes it's, it's tricky. All right, we've got text line center. Now let's put a margin just on the bottom. So one way to do that is like this. We can do margin zero that's top, right. And then 80 pixels on the bottom. And then we can just omit the left one. It'll be zero by default. Like that. So that put in a little extra space right here and we can change this to zero. Like that. There are other measures, by the way, you can have pixels but there're also ems which are basically the width of an M to em, like that's bigger. It's quite too big. But if it's zero then you don't have to specify the measurement. There's one more trick which is really useful for centering images. We saw before, right here that we have text line center. Let's see if we can center this image here. This image of sperm whales the same way. Here it is. So let's try. It's the same thing. Let's just use style. We can copy it. Style text align center. Save it and see if that did anything. That does not work. You can't center images using this text align property. What you do is you put a margin on the right and left of auto. And here you actually want a top and bottom of zero. So margin, if you omit two of the numbers so here you omitted one, this is top right bottom. And then we omitted left. If you only put two, then it's top and bottom. Actually we see this a hundred pixels and then 500 pixels. This is top and bottom and then left and right. You can see what happened there but it didn't actually even work on the top and bottom. And that's because images, as I mentioned briefly before are in line. So these margins don't work. We can actually do a block style. We can change it to a block style. We'll actually be doing this later in the tutorial. So now if we do display block then it actually does apply the margins properly. But that's not what we want in this case. What we want is margin zero top and bottom and auto, which arranges for the right and left margins to balance. Which in this case, will center it on the page. Oops. Except it didn't work. And that's because we're applying it to the href here. This a. That here, this a tag. Why didn't that work? Margin? Zero auto. Oh, but I just mentioned the display block. It's because we do need display block. I was wrong. I mean, it was later in the tutorial but it was right now, Because images are in line, we have to tell the system that the display is a block. Like a div or a paragraph or something. There we go. Excellent. So that probably would've worked actually. That's why it wasn't working. It was in the atag, but I bet this will work here. Nope. I was wrong. All right. Well, you know, this is how you learn things, right? You fiddle around. All right. So we need display block and then margin zero. So that's top and bottom and auto right and left. So what's happening here is these margins are being enforced on the right and left to be equally large which centers it on the page.