overflow：hiddenは折りたたみマージンを防ぐことができません

オーバーフロー：hiddenは新しいブロッキング形式コンテキストを確立でき、ブロッキング形式コンテキストは折りたたみマージンを防ぐことができます。しかし、この例では動作しませんが、それらの間のギャップはまだ20pxです。なぜですか？ http://www.w3.org/TR/CSS2/visuren.html#block-formatting
http://www.w3.org/TR/CSS2/box.html#collapsing-margins overflow：hiddenは折りたたみマージンを防ぐことができません

の.mod-、の.mod-B {マージン：20ピクセル;オーバーフロー：隠さ}

enter image description here

出典

2012-04-23 timezhong

私たちはいくつかのコードを見ることができますか？現在のところ、あなたが意味することについていくつかの推測をする必要がありますが、コードは物事を明確にするのに本当に役立ちます。 – Jasper

はい、それは今okです:) – timezhong

オーバーフロー余白又はパディングとは何の関係もありません。余白を必要としない場合は、overflowを変更する代わりにmarginを0に設定してください。

出典

2012-04-23 10:48:47

いいえ、あなたは何を意味するのかを理解していません。オーバーフロー：隠された新しいブロッキングフォーマットコンテキストを確立でき、ブロッキングフォーマットコンテキストはマージンの崩壊を防ぎます。 – timezhong

すべてのブラウザにバグがありますか？ワオ。 –

うまくいけば、これはブラウザによってはバグではないことが分かりました;）それは、[何か他のもののための回避策の副作用である]（http://stackoverflow.com/questions/9943503/why-does- css2-1-define-overflow-values-visible-to-establish-a-new-b/11854515＃11854515）を使用します。 – BoltClock

オーバーフロー：hidden子どもたちとin-flow子どもと一緒に崩壊することはありませんが、他のDIVとは折りたたまれています。このように書く：

div{ 
    margin:20px 0; 
    background:red; 
    width:50px; 
    height:50px; 
    float:left; 
    clear:left; 
}

チェックこのhttp://jsfiddle.net/fXz57/

出典

2012-04-23 10:59:59 sandeep

'float：left;'はブロックの書式設定コンテキストをトリガし、 'clear：left;'は浮動小数点を無効にするか、何が起こっていますか？ – Tomasz

あなたのクラスであなたが20ピクセルとして余裕を与えているので、余裕があります。 cssクラス.mod-a、.mod-b：20pxからマージンを削除します。

オーバーフロー隠しはこれとは関係ありません。これは、他のラベル内の長い要素が50ピクセル幅で、テキストが200ピクセルである場合に使用されます。その後、オーバーフロー：隠されたothを隠すでしょう

出典

2012-04-23 11:00:55

overflow：hiddenは折りたたみマージンを防ぐことができません

答えて

関連する問題