Collapsing margins

Paragraph

Paragraph

Adjacent vertical margins collapse (combine). In this example, each paragraph has a 1em margin. Note that the space surrounding each paragraph is equal, including the vertical space between them.

Paragraph

Paragraph

If margins didn't collapse, elements would end up unevenly spaced.

Note that this does not hold for horizontal margins:

float: left; margin: 1em;

float: left; margin: 1em;


References


Comments

Leave a comment