html - 内联 block 与 block : why does adding a "border" change inner height?

Question

我注意到向 display:block 元素添加边框会改变它们尊重内部元素的 margin-top 值的方式。

在下面的例子中:http://jsfiddle.net/vbmaxgh0/2/ ，为什么“无边框” block 元素不会以与“边框” block 元素或“内联 block ”元素相同的大小呈现？

Answer 1

您遇到此问题是因为边距崩溃:

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.

来源:W3C - 8.3.1 Collapsing margins

您还可以将 overflow: auto; 添加到 #block 来解决这个问题。

JSFiddle - DEMO

#block {
    display: block;
    overflow: auto; /* or overflow: hidden; */
}

进一步阅读:

Mozilla MDN - Margin collapsing