CSS佈局中斷div無邊框

Question

我遇到過這個問題多次。仍然不知道是什麼原因造成的。

重現：

1. 打開http://jsbin.com/ibowed/1/edit
2. 在CSS面板中找到.l-search-index .top { @線26
3. 變化border: 1px solid #ff0000;到border: 0;
4. whaaat？

瀏覽器：Chrome瀏覽器，但我覺得你可以在任何其他的嘗試..

請指教！

Answer 1

這是崩潰邊緣的一個非常直觀的案例：

CSS規範的§ 8.3.1解釋利潤率如何處理以及在何種情況下，他們崩潰。規則是不太容易理解（有幾種特殊情況），但我引用規範的相關部分爲您提供：

在CSS中，兩個或多個框的相鄰邊緣（可能或 可能不是兄弟姐妹）可以組合形成單個邊距。據說這種結合的邊際 將崩潰，並且由此產生的合併邊際被稱爲摺疊邊際。

兩個邊距相鄰當且僅當：沒有線箱，無間隙，不填充和無邊框它們分開

^{（由我強調）}

因此，一旦當您移除邊框時，元素的垂直邊距會摺疊。你的情況使得它有點複雜，因爲你有負利潤率。

爲了解決這個問題，你可以設置overflow屬性或.top元素上應用padding:1px。

Answer 2

這是關於邊緣重疊的方式，以及某些屬性如何強制它們被包含。如果您在頁面上放置兩個div，兩者的邊距均爲100px，則這些div的間距將爲100px。不是200px。這是因爲允許利潤率與其他利潤率重疊。這就是利潤率的工作原理。這是一件好事。

但是，如果您將div放在另一個div中，兩者都有邊距，那麼這些邊距也會重疊。子元素的邊距與父級的邊距重疊。

但是，一些屬性 - 邊界，正如您發現的那樣，還有填充和溢出 - 強制父級包含其子級的邊界，而不是重疊它們。

我確定有人可以提供更多的技術性解釋，但這就是我如何思考發生了什麼。

下面是一個簡化的測試案例：http://jsbin.com/ukodus/2/
之前的任何CSS的線的卸下//看到效果。

---

「這種行爲被稱爲保證金崩潰，只有頂部/底部的利潤率將面臨崩潰，而不是左/右」。 - @cimmanon

Answer 3

下面是解決方案。

.l-search-index .top{border: 0; height: 70%; overflow: auto;} 

您必須添加溢出。

希望這會有所幫助。