ホームページ > 記事 > ウェブフロントエンド > CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose
CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:081202ブラウズ
CSS によるマージンの縮小
a. まず、w3c ドキュメントのマージンの縮小の定義を見てみましょう:
CSS では、2 つ以上のボックス (兄弟である場合もそうでない場合もあります) の隣接するマージンを組み合わせて、この方法で結合されたマージンは折りたたまれると言われ、結果として結合されたマージンは折りたたまれたマージンと呼ばれます。
翻訳: CSS では、隣接するボックス (兄弟要素である場合もそうでない場合もあります) を 1 つのマージンに結合できます。 。 このマージンの結合はCollapseと呼ばれ、この結合されたマージンはMargins Collapseと呼ばれます。
例:
<style type="text/css">.testBFC{ width:100px; height:100px; background-color:green;}.testBFC div{ width:30px; height:30px; background-color:pink; }.testBFC div:first-child{ margin-bottom:10px;}.testBFC div:last-child{ margin-top:10px;}</style><div class="testBFC"> <div>div1</div> <div>div2</div></div> 実行結果は以下のようになります。この図から、div1 の margin-bottom と div2 の margin-top がマージされていることがわかります。その結果、div1 と div2 の間には 10 ピクセルしかありません。当初はそれらを 20 ピクセル離す必要がありましたが、これを実現するにはどうすればよいでしょうか。 div1 のクラスに、display: inline-block を追加できます。 これには、マージン崩壊の問題を解決または回避する方法が含まれます。
w3c ドキュメントの特定の注記を見てみましょう:
注意 上記のルールは次のことを暗示しています:
<head> <style type="text/css"> *{ margin:0; padding:0; } .testBFC{ width:100px; height:100px; background-color:green; margin-top:10px; } .testBFC div{ width:30px; height:30px; background-color:pink; } .testBFC div:first-child{ margin-top:10px; } </style></head><body><div class="testBFC"> <div>div1</div></div></body>
2. 通常のフローで子要素と一緒に折りたたまれないように、要素の余白に新しいブロック書式設定コンテキストを作成します。上の例のように、属性 overflow:hidden
3 を外側の div に追加できます。絶対に配置されたボックスは折りたたまれません。上の例では、親要素または子要素に属性 (position:absolute または fix) を追加できます。
4. 通常のドキュメント フローでは、ブロック レベルの要素の下マージンはその次の要素の上マージンに戻ります。兄弟要素はクリアランスを設定しないと折りたたまれます。記事上部の例を参照してください。
5. ブロックレベル要素に上境界線、上パディングがない場合、ブロックレベル要素の上マージンは、その子要素の上マージンと一緒に折りたたまれます。要素にはクリアランスが設定されていません。例: この例はすでにヒント 1 にあります。
6. このブロックレベル要素が下パディング、下境界線、および height:auto、min-height を設定しない場合、ブロックレベル要素の下マージンはその最後のブロックレベル子要素の下マージンと重なってしまう可能性があります。 :0
7. このようなボックスには、マージンが折りたたまれ、min-height:0、上下の境界線または上下のパディングが設定されておらず、高さ:0 または auto があり、ライン ボックスとそのすべてが含まれていません。要素の余白が折りたたまれます。
詳細については、w3c ドキュメントを参照してください: http://www.w3.org/TR/CSS2/box.html#collapsing-margins