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>
赤の box1 要素の上マージンがその親で折りたたまれていなければ、そのようなマージンは黒の背景をマージンの下に押し下げず、赤の box1 のマージンは親要素の黒の背景に重ねられます。下部の青い box1 要素にも同様の議論が適用されます。
ここで、CSS 2.1 仕様で言及されているように、「float: left;」のいずれかが または「オーバーフロー: 非表示;」含まれている div の一部がコメント アウトされ、次に、親要素の上端と下端 (この場合は 0)、最初の子の上端 (この場合は 10px) の端、および下端 (この場合は 10px) がコメント化されます。 ) 下の子の境界線が分離され、以下に示す結果が得られます。
さて、ここで質問が来ます:
このルールを CSS に導入した理由は何ですか? それは単なるランダムな決定でしたか、それとも実際の実用的な例に基づいた動機でしたか? (これを知っていると、好奇心を満たす以外に、ルールを覚えるのにも役立ちます)。
ありがとう。