CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:08

オリジナル

1262 人が閲覧しました

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 ドキュメントの特定の注記を見てみましょう:

注意上記のルールは次のことを暗示しています:

フローティングボックスと他のボックスの間のマージンは折りたたまれません (フロートボックスとそのボックスの間でも)

新しいブロック書式設定コンテキストを確立する要素のマージン (float や、「visible」以外の「overflow」を持つ要素など) は、そのインフローの子と一緒に折りたたまれません。

絶対的に配置されたボックスのマージン(フロー内の子であっても) 折りたたまれません。

インラインブロックボックスのマージンは (フロー内の子であっても) 折りたたまれません。

フロー内ブロックレベル要素の下マージン兄弟にクリアランスがある場合を除き、常に次のフロー内ブロックレベルの兄弟の上マージンで折りたたまれます。

フロー内ブロック要素の上マージンは、次のフロー内ブロックレベルの子の上マージンで折りたたまれます。要素には上部の境界線も上部のパディングもなく、子にはクリアランスがありません。

「高さ」が「auto」、「min-height」が 0 のインフローブロックボックスの下マージンは、その要素によって折りたたまれます。 last in -flow block-level ボックスに下部パディングも下部境界線もなく、クリアランスのある上部マージンで子の下部マージンが折りたたまれない場合、子の下マージン。 ' プロパティはゼロで、上下の境界線も上下のパディングもなく、「高さ」は 0 または「自動」で、行ボックスとそのすべてのインフローが含まれていません。子のマージン (存在する場合) が折りたたまれます。

1. フローティングボックスは他のボックスの間で折りたたまれません。 (フローティングボックスとその通常のフローの子要素であっても折りたたまれません。) たとえば、次の例では、親要素と子要素の間で外縁が折りたたまれます。この場合、親要素で設定できます。または子要素がフローティングになった場合は正常に表示されます。

<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