Vertical Margins Collapse

Tweet

Margins that meet horizontally is different from margins that meet vertically. Horizontal margins work normally and they do not collide each other. But vertical margins collide each other and they leave the space of a small margin.

Setting the Margins

box_a {
     margin-bottom: 30px;
}

box_b {
     margin-top: 50px;
}

For experimenting vertical margins collapse, we are now creating a margin bottom for Box A with 30 pixels and creating a margin top for Box B with 50 pixels.

Collapsing the Margins

The Box B's 50 pixels top margin now touches the Box A's bottom margin and penetrates the Box A's content until 20 pixels within the content. After that, the Box A's bottom margin of 30 pixels stops the penetration. This is called collapsing of margins and this happens only vertically but not horizontally.