先记好，margin 的意义是留白
假如两个 block 长这样︰
<div class="a">Hello</div>
<div class="a">Hello</div>
对 .a 指定“上下留白 30px”，两个 block 之间的留白有多高？
30px，符合预期。对任意一个 block 来说，上下的确都有了 30px 的留白
若是长这样︰
<div class="a">Hello</div>
<div class="b">
<div class="c">Hello</div>
<div class="c">Hello</div>
</div>
并且对 .b, .c 指定“上下留白 30px”，
.a 和 .b 之间的留白有多高？.a 和 .c 之间的留白有多高？
30px，符合预期。对 .b 和 .c 来说，上下的确都有了 30px 的留白
总之，这不是一个“不如预期”的规范。下面直接引用 spec 的说明
> 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.
http://codepen.io/eight04/pen/eBQvWR
上面的连结包括 margin collapsing 的范例和一些解法。用 inline-block 的确可以
避免这个现象（因为这个特性是 block 独有），但我认为只因这个理由就把本来是
block 的东西设为 inline-block 不太适合。