内联块与块：为什么添加“边框”会改变内部高度？

Question

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

在以下示例中：http://jsfiddle.net/vbmaxgh0/2/，为什么＆＃34;无边框＆＃34;块元素的渲染大小与＆＃34; border＆＃34;相同块元素或＆＃34;内联块＆＃34;元件？

Answer 1

由于保证金崩溃，您遇到了这个问题：

  

两个或多个方框的相邻边距（可能会也可能不会   兄弟姐妹）可以结合形成单一的边缘。结合的边缘   据说这种方式会崩溃，结果是合并后的利润率   称为崩溃边缘。

来源：W3C - 8.3.1 Collapsing margins

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

JSFiddle - DEMO

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

进一步阅读::

  

Mozilla MDN - Margin collapsing