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

我注意到，添加一个边框到display:block元素会改变他们尊重内部元素的值margin-top的方式。内联块与块：为什么添加“边界”会改变内部高度？

在以下示例中：http://jsfiddle.net/vbmaxgh0/2/为什么“border-less”块元素未呈现与“border”块元素或“inline-block”元素相同的大小？

2014-10-12 Yosi

它，因为倒塌的利润率检查了这一点 - HTTP：//www.w3。 org/TR/CSS21/box.html＃collapsing-margins和https://developer.mozilla.org/en-US/docs/Web/C SS/margin_collapsing – Anonymous 2014-10-12 13:24:11

如果你想让这两个div的大小相同，可以使用'box-sizing：border-box'，它会从 – 2014-10-12 13:31:31

内部给出'border padding'，因为它是如何构建html的，而像@VitorinoFernandes已经说过，像twitter引导程序这样的框架为了方便起见使用了代码行。 – 2014-10-12 13:53:57

你有这个问题，因为保证金倒塌的：

两个或多个箱（这可能会或可能不会是兄弟姐妹）毗邻的利润率可以结合起来，形成一个单一的余量。据说这种方式合并的利润率将崩溃，并且由此产生的合并利润率为称为折叠利润率。

来源：W3C - 8.3.1 Collapsing margins

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

的jsfiddle - DEMO

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

进一步阅读::

Mozilla MDN - Margin collapsing

来源

2014-10-13 09:01:17 Anonymous

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

回答

相关问题