As others have already said, this is known as collapsing margins:
8 Box model - 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
In this case, they are sibling elements; therefore the following applies:
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Floating one of the sibling elements would prevent the margins from collapsing:
EXAMPLE HERE
<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; float:left;">collapsing</div>
Margins of inline-block boxes do not collapse (not even with their in-flow children).
Making an element inline-block would also prevent the margins from collapsing:
EXAMPLE HERE
<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; display:inline-block;">collapsing</div>
Assuming the elements weren't siblings, you could add overflow:hidden to the parent element, as the following would then apply:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
