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.
Steven Parker204,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:
- The bottom margin of one element is combined with the top margin of the next (sibling) element
- The top margins (or bottoms) of a parent and child element are combined
- 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.