內聯塊與塊：爲什麼添加「邊界」會改變內部高度？

我注意到，添加一個邊框到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

內聯塊與塊：爲什麼添加「邊界」會改變內部高度？

回答

相關問題