「margin-top」を持つ子 Div と上枠のない親 Div の間でマージンが崩れるのを防ぐ方法は?

CSS: 親 Div に上境界線がない場合のマージントップの管理

子要素にマージントップがあり、その親要素に上境界線がない場合、子要素は要素のマージンによって視覚的な不整合が生じる可能性があります。提供された画像に示されているように、オレンジ色の div が緑色の div を押し下げているように見えますが、後者には上部の境界線がありません。

親 div に境界線を追加せずにこの問題を解決するには、次の方法を実装できます。マージンの崩壊を防ぐソリューション。マージンの折りたたみは、隣接する要素 (この場合、緑とオレンジの div) のマージンが 1 つのマージンに折りたたまれるときに発生する CSS の動作です。

マージンの折りたたみを防ぐには、次の CSS を親要素に追加します。

overflow: auto;

提供された CSS スニペットの .body に overflow:auto を適用すると、マージンの折りたたみが防止され、望ましい視覚的配置が維持されます。マージンの折りたたみの詳細については、W3C 仕様を参照してください: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

以上が「margin-top」を持つ子 Div と上枠のない親 Div の間でマージンが崩れるのを防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。