CSS margin collapse explained

Key Takeaways

Hey folks, in this video we're going to talk about some quirks that you might see when working with margins. Specifically, something called margin collapse that can make margins behave in ways that you might not expect. So, let's start quickly with what margins do. Margins allow you to add space around an element that kind of pushes away other neighboring elements. For example, you can use margins to create space between an element and its parent. So here on this demo website that we have open, we have a gray parent div and inside it has a purple child div nested inside it as you can see in the markup. Now there is a little space between them already because I added 20 pixels of padding to the parent. But let's say I want to add more space and on the child I will add a margin of 40 pixels. So now when we save there's even more space around the child. And in our dev tools if I hover over the child you can see that there is that margin adding space between the child and the parent. You can also use margins to add space between sibling elements meaning elements that are next to each other in the HTML. So on this demo we have two elements and they both have a dark green background color and they're next to each other. So if I add a margin of 20 pixels, this will be applied to both. And we save. Now we can see that both of these elements have a 20 pixel margin around them, which is adding space around them and to the parent as well as between the two sibling elements. You can also set margins to a negative number. This negative margin will pull the element closer to other elements around it instead of pushing them farther away. So here we have two elements. We have the first element which is purple and it has a margin bottom of 20 pixels which is what's adding the space between them. Then we have a turquoise element underneath it. And let's add a negative margin to it. So I'm going to set margin top to 80 pixels. And then when I save, the turquoise element has been pulled up 80 pixels from where it was before and it's now overlapping the purple element. However, one weird quirk with margins is that when you have two vertical margins that directly face each other, they are going to cause something called margin collapse. So in our demo website here, I'm going to create an H1 tag and give it some text. And then below that, I'm going to create a paragraph. And let's add some Lauram Ipsum placeholder text to that. So now we have both of them on our website. So both the H1 and the paragraph tags do have margins on top and bottom already from the default browser styles. And I can see it if I inspect let's say the headline, we can see it has top and bottom margin here. And the paragraph also has a top and bottom margin. However, if you look closer, let me just zoom in a little bit. You might notice that the paragraph's top margin and the headlines bottom margin are both basically occupying the same space between these two elements. Instead of stacking the two margins one after the other, as you might expect, the two margins have instead collapsed into one another until the headline's bottom margin hits the top of that paragraph's content box. So, this is a classic example of margin collapse. And this was originally a feature back when most websites were very HTML and textbased to avoid having a double margin between subsequent blocks of text. Now, another quirk of margin collapse is that the margins of an element can collapse outside of its parent element. So, let's make a parent element for the paragraph. I'm going to create a div with a class of block and I'm going to put the paragraph inside this div. There we go. Then in our styles, let's add a style rule for the block class. And I'll set the background color to light blue so we can see it better. So now on our website, the spacing before the paragraph is still the same. And if we inspect the paragraph, you can see that the paragraph's margins are actually extending outside of this block div, its parent, which has that light blue color. So you can see the margins are going outside of it. And in this case, this is a good thing because we do still want space between the headline tag and the paragraph. However, margins collapsing outside the parent can sometimes not be what you want. So, let me show you one example of that. So, on our website, let's say that we want to have the blue background block be around the H1 tag as well as the paragraph. So, I'm going to take the H1 tag and move it inside the block div. There we go. And I want the blue block to be right at the very top of the website. So, I'm also going to add a style on the body tag and remove the default margin that it has from the browser styles. So, now when we save, we don't want any space around the block. It should be up at the very top, but as you can see, there is white space above the headline. So if we inspect the H1 tag, we can see that the top margin is also extending outside of the block div like the paragraph was before it. And it is basically pushing the entire block down from the top of the web page, which is not really what we want. So if you have margin collapse happening like here, and you don't want it to happen, well, how can you get rid of it? Fortunately, there are some CSS style rules that you can add to an element to prevent the margins from collapsing outside of it. So, in this case, we want to prevent margin collapse outside of the block div. So, in our block class styles, we can one way we can prevent it is by adding padding to this div. So if I add padding of 10 pixels and I save and now the blue block is completely flush against the top side of the website. And you can actually do the same thing with border. Border will do the same thing as padding and remove margin collapse. So let's try border uh 2 pixel solid. Oops. Magenta. If we save, you can see again the blue background is going all the way to the top and we have that border. However, you might not want to, you know, have to add padding or border if you don't really need it just to prevent margin collapse. Even though you could do a hack like adding a transparent border, so that way you can't see it, but it is still preventing margin collapse. But there's actually another style rule that you can add that will prevent margin collapse and it's not going to have any side effects like adding padding or border to your styles. So let's comment out our border style and add the style which is setting display to flow root. So when we save now the top margin is not extending outside of the block anymore. In adding display flow route, it creates something called a block formatting context. And this is honestly just a very confusing way of saying that it's going to force things like collapsing margins and also the old CSS floats that its children might have back within its bounds. So display flow route is a solution to margin collapse. But personally, as an alternative, I try to avoid using margin to add space between a child and its parent like we've basically done here with the H1 tag. So, in my opinion, the better way to add space between the H1 tag and the block div would be to add the space just with padding on the block itself in the parent. So in our styles for the H1 tag, let's remove the margin, the margin top. And then in the block, we can add padding again of let's say 20 pixels to add 20 pixels of space all around the content in it. So now we have added space before the H1 tag inside the block parent. And since we're using padding to add the space, we don't need to worry about margin collapse happening. All right, so that was a quick video on how margin collapse works and how you can avoid it happening. So next up, we're going to talk about the CSS display property.