CCS におけるマージン: トップ崩壊問題を解決する

HTML 構造は次のとおりです。

CCS 構造は次のとおりです。

ページ効果図は次のとおりです。

ここで、子要素に右に 50 ピクセル、下に 50 ピクセルが明確に設定されていることがわかりますが、ページに表示される効果は右に移動しているだけで、下には移動していません。

一般的に、 margin要素の外側の余白を設定するために使用されます。通常、 margin値を設定するときは、親要素をブラウザに対して相対的に配置し、子要素を親要素に対して相対的に配置する必要がありま す。

margin-top: 50px ですが、ページには効果がなく、マージンが失われていることを意味します。

では、マージン崩壊とは何でしょうか?

子要素にmargin-top: 50px;を設定した場合、内部のボックスは変化しません。しかし、子要素にmargin-top: 150px ; を設定すると、親ボックスの高さよりも大きくなり、子要素は親要素に対して相対的に配置されなくなり、親要素とともにブラウザに対して 150px 下に移動します。つまり、マージンが失われます。 (マージンの崩壊は、親がブラウザに対して相対的に配置され、子が親に対して相対的に配置されていない場合に発生します。子は親に対して相対的に折りたたまれているようなものです)

margin-top: 50px を親要素よりも高い高さに調整すると、子要素は親要素に対して相対的に配置されなくなり、ブラウザに対して親要素とともに 150px 下方に移動します。
ページ効果図は次のとおりです。

マージン崩壊問題を解決するには、bfc の概念を使用する必要があります。

BFC はblock format contextの略です。BFC をトリガーする要素はレンダリング ルールの一部を変更し、これを使用していくつかの難しい CSS バグを解決できます。

bfc をトリガーする要素は次のとおりです。

位置:絶対;
表示: インラインブロック;
フロート: 左/右;
オーバーフロー:非表示;

CSS 構造は次のとおりです。

ページ効果は次のとおりです。

上記のいずれかの行で、マージンの崩壊の問題を補うことができます〜

要約する

CCS の margin: top collapse に関するこの記事はこれで終わりです。CCS margin: top collapse に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。