divで境界線のないCSSレイアウトが破損する

Question

私はこの問題を何回も見つけました。それでも何が原因かわからない。

再現：

1. オープンhttp://jsbin.com/ibowed/1/edit
2. CSSパネルで.l-search-index .top {ライン@ 26
3. 変更border: 1px solid #ff0000;
border: 0;にwhaaatを見つけますか？

ブラウザ：クローム、私はuは、他に試すことができると思います。..

教えてください！

Answer 1

これは、余白を崩壊のは非常に直感的ケースである：CSS仕様の

§ 8.3.1はマージンが処理され、どのような状況の下で、彼らは崩壊する方法を説明します。ルールは、（いくつかの特殊なケースを持って）理解することはあまりにも簡単ではありませんが、私はあなたのための仕様の関連部分を引用：CSSで

、二つ以上のボックスの隣接するマージン（たり 兄弟ではないかもしれない）は、単一のマージンを形成するために結合することができます。この方法を組み合わせたマージン は崩壊すると言われており、結果として得られる合計は の崩壊マージンと呼ばれます。すぐに、そう

（私が強調さ）

それらを分離なし行ボックス、隙間なく、無パディングと何の国境：

二つのマージンが場合にのみに隣接されていませんボーダーを削除すると、要素の垂直方向の余白が崩れます。負のマージンがあるため、ケースが複雑になります。

この問題を解決するには、.top要素にoverflowプロパティを設定するか、padding:1pxを適用します。

Answer 2

マージンが重なる方法と、特定のプロパティがそれらを強制的に含む方法と関係があります。ページに2x divを配置する場合、両方とも100pxのマージンを使用すると、div間の間隔は100pxになります。 200ピクセルではありません。これは、マージンが他のマージンと重なるためです。それはマージンの仕組みです。それはいいことです。

しかしdivを余白付きの別のdivに入れると、それらの余白も重なります。子要素のマージンは、親のオーバーラップと重なります。

しかし、あなたが発見したように境界線があるだけでなく、埋め尽くされ、オーバーフローする - いくつかのプロパティは、子の余白を重複させずに含むように強制します。

誰かがもっと技術的な説明をすることができると確信していますが、そのことがどうなっているのかを考えています。

簡略化されたテストケースは次のとおりです。http://jsbin.com/ukodus/2/
CSSの行の前に//を削除してください。

---

「この行動は、マージンの崩壊と呼ばれている。唯一のトップ/ボトムマージンは、左/右、ない崩壊します。」 - @cimmanon

Answer 3

ここに解決策があります。

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

オーバーフローを追加する必要があります。

これが役に立ちます。