先记好，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 不太适合。 -- ▉▏ ▉▏ ◢ ▊▎ ◣ ◤ ▄▆▄ ◥ 　 ◥ ◥ ◤ ◤ ▄ ▄ --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.160.124.204 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1481777581.A.F2C.html