Two block-level siblings follow one another in normal flow inside the same parent. The first has margin-bottom: 30px, the second has margin-top: 20px. Nothing separates them: no borders, no padding, no line boxes, no clearance, and the parent is an ordinary block container — not a flex or grid container and not a new block formatting context. How much vertical space ends up between them?

Erklärung

The two margins meet with nothing in between, so they collapse into a single margin equal to the larger of the two: 30px, not the 50px sum. This is normal, specified behaviour rather than a bug, which is why adding margin to both sides of a gap so often produces less space than expected. Collapsing would not happen if the parent were a flex or grid container, if a border or padding sat between the two margins, or if either box established a new block formatting context.