This is the behaviour as it is defined in the CSS box model:
8.3.1 Collapsing margins
In this specification, the expression
collapsing margins means that
adjoining margins (no padding or
border areas separate them) of two or
more boxes (which may be next to one
another or nested) combine to form a
single margin.
In CSS2, horizontal margins never
collapse.
Vertical margins may collapse between
certain boxes:
- Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.
- Vertical margins between a floated box and any other box do not collapse.
- Margins of absolutely and relatively positioned boxes do not collapse.
http://www.w3.org/TR/CSS2/box.html
The rationale behind this might be, that if you set a (vertical) margin on something, you just want to ensure that there is at least this much space left between the border or padding of this element and the border or padding of the next element (e.g. two paragraphs).
If you want the margin to be contained in the div (i.e. making the div expand), you need to set some padding or border at the top and bottom of the div.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
