CSS Margin Collapse

CSS is literally broken and here's proof.

If you put an element with a margin bottom of 20 pixels on top of another element with a margin top of 10 pixels, the space between them isn't 30, but 20.

But if you put them side by side, with left and right margins of the same values, the margin becomes 30. Whoa, what happened here?

This scenario is called margin collapse.

It happens when two adjacent html elements each have a margin between them. Instead of adding the two margins, CSS will take the larger of the two and make it the final margin. Hence called margin collapse.

It's not hard to understand, right?

There are just a couple exceptions to this.

First, only vertical margins collapse. The left and right margins don't.

Second, it only works when they are not separated by any blocks or content. For example, if there's a line break between them, it will not collapse.

If there's a padding, it will also not collapse.

With that said, you will think that if you wrap one of the elements with a container, margin collapse will not happen because they are separated, right? Nope. It still happens. Because margin was designed to separate siblings, not parent and child. Unless you give a height to the parent to separate the elements.