HTML/CSSAdvanced#css#box-model

What is margin collapsing?

When two vertical margins of block elements touch (adjacent siblings, or a parent and its first/last child with no border/padding between), they collapse into a single margin equal to the larger of the two, rather than adding together.

Example

<div style="margin-bottom: 20px;">A</div>
<div style="margin-top: 30px;">B</div>
<!-- gap between A and B is 30px, not 50px -->

What is margin collapsing?

Related Questions

Explain the different values of the display property.

What is the difference between visibility: hidden and display: none?

Explain the CSS position property values.