2.2 Margins on Child Elements

Hi, and welcome back to the complete guide to CSS positioning. In this lesson, I'm gonna show you how to make sure that your child elements margins work the way that you want them to. With just a little bit of set up and then I'll show you what I'm talking about. So you should still have your rapid div that we set up in the previous lesson. So we're just gonna apply a little bit of styling to this. So down here in the width box. We're just gonna enter width of 800 and that's gonna set our repo to be 800 pixels wide. And then we're gonna click this button here to center it. And what that's actually doing is setting the left and the right margins to order. Now we're gonna put some margin at the top, just by dragging this box upwards. Will set that to say 50, you can also just click on this button, and manually enter the amount of margin that you want. And then to make everything a little easier to see, we're gonna add a background color. So in this background section, I've got this color picker, and give it a dark gray. Right now, let's add a child element. So up here, hit the plus button and then hit the div block button. And now, let's give our new child element a class. We'll just call it, child_01. Now, let's make this one a little narrower than the parent, just to make it easy to see. So make this one 500 pixels wide, and we're gonna center it again. And then, let's give it another background color. All right, we just go with that blue. I know one of the common things that you're gonna wanna do with a child element is create some space between the child and the top of the parent. And one of the ways that you can do that is by setting a margin. So we've got our child selected and we're just gonna drag up our margin. But then, look what's happening here. Rather than the margin pushing the child down from the top of the parent, the margin is just protruding out above the parent. And it's not causing any offset at all, it's not causing any movement. And when you're getting into CSS layout development, this is something that comes up often and it can be quite perplexing. Now, there are a couple of ways that you can solve this. Now, one option is to select the parent element and then set its overflow to auto. So if you look down here, you see we have this overflow property. And right now, it's set to visible, but if we set that to auto at here on the end. Look there, our margin is working properly again. That's one way that you can handle it. So we just set that back again. So we can go to the next option, and the next option is to select the child element. And by default, this child element has a display type of block. A block is the default type of display that you have on a div, and you'll also have a block display on a heading tag, for example. And on the other hand, an inline element which is a setting here is something like regular text in a paragraph, for example. Then you have inline block, which is kind of something in between. It's a little bit like a block and it's a little bit like an inline element. So select that. And there now, our top margin is working again. But you will have noticed that this child element is now off to the left and that's because, it's now behaving a little bit like a text item. So that means that these margins that we set earlier, these are no longer working. They were affecting it before that was a block element, but now that it's an inline block element, we need to use text settings to control it instead. So if we wanted to center the element now, we would need to select the parent and we would need to go down to the topography settings. And set it to have all its child text centered. So basically, because we've set this child element inline block, that's effectively making it get treated in much the same way as a text element would. All right, so that's the second way. So I'll just reset those settings. I'll just put this back up to being a block. Now the third way that you can solve this problem, is to add a border to the parent element. So what you wanna do is add a border on the side that you want the margins to take effect. So we want our top margins to take effect, so we're gonna add a top border to our parent element. So we're gonna scroll down until we reach the border section, and then we're gonna select this button here, which will control the top border. And then we're gonna give that top border a width of one pixel. And there you go, now our top margin is working. So we'll just undo those steps again, so we can have a look at the fourth and last option. And that's very similar to the border method that we just use this time instead of using a border. We're going to use padding on the parent element. So just like with the border, the padding needs to be on the side that you want the margins to take affect. So we'll scroll back up again. Now on the parent, we're gonna set some padding. So that's this interior option here. So we just add one pixel of padding at the top. And there we go, that makes our top margins on our child element take effect. Now just remember that for the padding or the border option. It does need to be on the side of the margins that you're trying to use. So if I set this back to zero and then put a padding at the bottom, it's not going to do anything. And it has to be on the target side. All right, so just a recap. If your child margins aren't working how you want, then either set the parent to overflow order. Set the child to inline block, give the parent a border on the target side. Or give it padding on the target side. So now, when you inevitably run into this issue, you'll know exactly how to solve it and you'll have a few options there that you can choose from. And now that you know how to do that, we're ready to move on to using floats and clears. So to get ready for doing that, let's just reset the padding on our parent back to zero. We're gonna set the overflow to auto, so that those child margins work. But for now, we're also going to reset those child margins back to zero. All right, so we're all ready for the next lesson. I'll see you there.