CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Vertical Margin Collapsing

Is someone able to make me a summarize about Vertical Margin Collapsing. Please tell how it happen and why does this happen. Please be clear because I am mixed up! Thanks in advance.

1 Answer

Steven Parker
Steven Parker
204,000 Points

Margins are combined ("collapsed") by the browser so that the total margin is the same as single largest one. This happens in 3 cases:

  1. The bottom margin of one element is combined with the top margin of the next (sibling) element
  2. The top margins (or bottoms) of a parent and child element are combined
  3. The top and bottom margins of a single element with no contents are combined

That's the short summary. For more details, see the MDN page on Mastering margin collapsing.