Illustration of Vertical Margin Combinations

Here is the outer div --
Margins: top: 1em; bottom: 1em.
The box expands to take the text, and the margin will add space before and after.
Margins: top: 1em; bottom: 2em.
The total top margin here should be 1em (combine 1em and 1em). Let's see what happens to the bottom margin.
Margins: top: 1em; bottom: 0.5em.
The top margin is 2em (the larger of 1em and 2em). Now lets look to the bottom here.
The text here is overlapped.
This block has a negative top margin of -2.0em, so it backs up and overlaps the previous block by 1.5em -- exactly the line height. Thus the first line should exactly overlap the last line of the previous block -- There is a 2 pixel misalignment due to the border around the element.
Margins: top: -1.5em; bottom: 1em.
another outer div