4.3 Applying a margin - Video Tutorials & Practice Problems

<v Instructor>Let's take care of this weird situation</v> with the text right up against the image by adding what's called a margin. It's gonna be part of the style here. Let's put it on a new line. So we've got style float left and now let's start off with a margin of 40 pixels. See what that looks like. Take a look at what it looks like now, and we'll refresh it. And now we see that there's a margin all around the whole image. It's better, but what we really want is a margin just here on this right side. There are a couple of ways to do that. We can do this margin right, like that, that works. But there's a more general way to do this which involves the margin in four directions. And it goes around clockwise like this. It's up, right, bottom, left. And there are four numbers in sequence. So it looks like this zero, sorry, it's a margin here. Up right 40 pixels, no semicolons between the numbers. Up, right, bottom, left. So this is the same thing, the same margin right. I can see it didn't change. If we changed this here, say this is bottom. If we said, let's say a hundred pixels just to make sure we can see it, can see that that pushes, it actually does weird things, it pushes it over to the right. You can do this here, this is a hundred pixels. Style rules sometimes have weird effects that you can't guess, and we have that. This behavior with the bottom margin is because of the float, we've got rid of this. You can see here, now there's a hundred pixel margin under here, but now we can't see the right margin because the text isn't flowing past it. So we need to float left for that. You can see that one of the best ways to learn what these rules do is just to comment things out or delete them, just fiddle around until you learn how they work. But that's what we want for now, margin just on the right, like this.