The margins of two or more boxes can combine to end up forming a single (collapsed) margin. These margin boxes don't have to be siblings.

Adjoining margins may collapse if they are not the margins of the root element's box or if there are top and bottom margins of an element with clearance (clear property) in which case the resulting margin does not collapse with the bottom margin of the parent block.

Horizontal margins will never collapse.

Two margins will be adjoining if:

  • both belong to in-flow block-level boxes from the same block context;
  • no line boxes, no clearance, no padding and no border are placed between them;
  • both belong to a vertically-adjacent box edges and form one of the following pairs:
    • top margins of a box and its first in-flow child;
    • bottom margin of a box and top margin of its next in-flow following sibling;
    • bottom margins of a last in-flow child and its parent if the parent has the height property set to auto;
    • top and bottom margins of a box that does not establish a new block context and that has min-height property computed as "0", height property computed to "0" or auto and has no in-flow children.

Adjoining margin boxes can be generated by elements that are not direct siblings or even the ancestors.

When margins collapse, the resulting width will be the maximum of the collapsing margins' widths.

If the top and bottom margins of a box are adjoining, then it might be possible for margins to collapse through.

In such a case:

If the element's margins collapsed with its parent's top margin, the top border edge of the box will be defined to be the same as the parent's. Otherwise, or the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin will be involved.

 

›› go to examples ››