2

CSS 2.1 仕様のセクション 8.3.1では、余白の折りたたみについて次のように述べられています。

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

ブロック整形コンテキストは、親によって確立され、子に適用されるコンテキストであることを理解するのにしばらく時間がかかりました。子供たちに)。

次のコード スニペットでは、隣接する子 div 要素の境界線の高さが折りたたまれているため、任意の 2 つの子 div 要素の間には、20px + 20px = 40px ではなく max(20px, 20px) = 20px の垂直間隔があり、境界線の高さは最初の子要素と親 div、および最後の子要素と親 div の間も、それぞれ 20px + 20px = 40px ではなく max(20px, 0px) = 20px です。CSS 2.1 仕様と同様に、水平方向には折りたたみが表示されないことに注意してください。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="background: green;">
  <div id="wrapper" style="width: 400px; background: black;
                           /* overflow: hidden; *//* float: left; */">
    <div id="box1" style="margin: 20px; height: 100px; background: red;">
    </div>
    <div id="box2" style="margin: 20px; height: 100px; background: blue;">
    </div>
    <div id="box3" style="margin: 20px; height: 100px; background: red;">
    </div>
    <div id="box4" style="margin: 20px; height: 100px; background: blue;">
    </div>
  </div>
</body>
</html>

ケース1

赤の box1 要素の上マージンがその親で折りたたまれていなければ、そのようなマージンは黒の背景をマージンの下に押し下げず、赤の box1 のマージンは親要素の黒の背景に重ねられます。下部の青い box1 要素にも同様の議論が適用されます。

ここで、CSS 2.1 仕様で言及されているように、「float: left;」のいずれかが または「オーバーフロー: 非表示;」含まれている div の一部がコメント アウトされ、次に、親要素の上端と下端 (この場合は 0)、最初の子の上端 (この場合は 10px) の端、および下端 (この場合は 10px) がコメント化されます。 ) 下の子の境界線が分離され、以下に示す結果が得られます。

ここに画像の説明を入力

さて、ここで質問が来ます:

このルールを CSS に導入した理由は何ですか? それは単なるランダムな決定でしたか、それとも実際の実用的な例に基づいた動機でしたか? (これを知っていると、好奇心を満たす以外に、ルールを覚えるのにも役立ちます)。

ありがとう。

4

1 に答える 1

2

私ができる唯一のもっともらしい説明は、あるブロック整形コンテキストのボックスが別のブロック整形コンテキストのボックスと対話できないという意味で、ブロック整形コンテキストはアトミックであるということです。マージンの崩壊に関するこのルールは、float が他のブロック フォーマット コンテキストに侵入したり、独自のブロック フォーマット コンテキストから先祖ブロック フォーマット コンテキストに出たりしないというルールと同じ流れにあるように見えます。

これを拡張すると、新しいブロック フォーマット コンテキストを確立するボックスのフロー内の子孫は、そのボックスのブロック フォーマット コンテキストに参加しますが、ボックス自体は、レイアウト ツリーの上位に確立されたブロック フォーマット コンテキストに参加します。したがって、ボックス自体のマージンは、同じブロック書式設定コンテキスト内のボックスで折りたたまれることが期待されますが、子孫ボックスではありません。

セクション9.4.1はこれをサポートしているようです:

ブロック フォーマット コンテキスト内の隣接するブロック レベル ボックス間の垂直マージンが崩壊します。

「ブロック フォーマット コンテキスト内の隣接するブロック レベルのボックス」と表示されていることに注意してください。これは、ブロック フォーマット コンテキスト間でマージンが崩壊しないという事実が、ブロック フォーマット コンテキストの固有のプロパティであることを意味します。しかし、これは仕様の私の解釈にすぎません。私は著者ではないので、これが意図した意味であったかどうかはわかりません。

于 2016-05-27T00:43:41.470 に答える