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.