|
What you see is called collapsing margins, and it's a feature of CSS: Basically it happens here because the margin property refers to the distance from the other element's content, not its margin (that is, because the top and bottom margins are the same, the distance between the contents doesn't change).
There are a few ways you can fix this - what works best depends a bit on your layout. You could set bottom-margin: 2em; or add autoflow: auto; into your style, or you could use padding-top; and padding-bottom; instead of margin. Try out what looks best in your case - each of these has a slightly different effect on the layout.
|