Margin-Top がボーダーレス親要素に影響を与えないようにするにはどうすればよいですか?

ボーダーレス親要素の CSS Margin-top の問題を解決します

親要素に上ボーダーがない場合、子要素を上にすると、親要素が下に移動する可能性があります。この問題は、親要素に上部の境界線を追加することで解決できますが、これは元の要件に反します。

ただし、これを防ぐ別の解決策があります:

オーバーフローを追加して、親要素

に overflow:auto を適用します。 auto を親要素に適用すると、そのコンテナにコンテンツを強制的に含めることができるため、マージンの崩壊を防ぐことができます。マージン折りたたみは、隣接するマージンを 1 つのマージンにマージする CSS の動作です。

上記の例では、次の CSS を .body クラスに追加できます:

.body {
  overflow: auto;
}

これにより、マージントップが .body を維持したまま下に移動するのを防ぎます。上部のクリアフレーム。

リファレンス

• [W3C CSS2 仕様: Margin Collapse](http://www.w3.org/TR/CSS2/box.html# collapsing -マージン)

以上がMargin-Top がボーダーレス親要素に影響を与えないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。