Adjacent margins will collapse.
In order to have consistent gaps around the edges of a content area you need to ensure the content area has a margin so that it collapses with any contained content (the largest of two meeting margins is used).
Generally, this approach will allow different markup to exist within the content without changing the size of the surrounding gaps. So this…
<div style="margin: 2em">
<p style="margin-bottom: 1em">foo</p>
<div>bar</div>
</div>
…will have the same surrounding gaps as this…
<div style="margin: 2em">
<div>bar</div>
<p style="margin-bottom: 1em">foo</p>
</div>
…because in both cases the outer div’s margin of 2em will be used (p has a smaller margin and div has no margin).
