ホームページ > 記事 > ウェブフロントエンド > 垂直マージンの折りたたみはネストされた要素でどのように機能しますか?
ネストされた要素における垂直マージン崩壊の概念を理解することは、初心者にとって難しい場合があります。この記事では、簡単な説明と例でこの動作をわかりやすく説明します。
垂直マージンの崩壊の基本
垂直マージンの崩壊とは、隣接するマージンの垂直マージンが崩れる状況を指します。要素は折りたたまれたり、1 つのマージンに結合されたりします。この折りたたみは、2 つ以上の垂直マージンが接触し、単一のより大きなマージンが生じる場合に発生します。
ネストされた要素とマージンの折りたたみ
要素が相互にネストされている場合、垂直マージンの折りたたみには、独自のルール セットが適用されます。ネストされた項目は「寄り添い」として知られる現象を示し、境界線や先行テキストなどの特定の要素で区切られていない限り、コンテナの先頭にぴったりと整列します。
例
次の HTML 構造について考えてみましょう。
<code class="html"><div id="outer"> <div id="inner"> A </div> </div></code>
外側の div のマージントップが 10 ピクセルで、内側の div のマージントップが 20 ピクセルの場合、垂直マージンは 20 ピクセル (最大値) に縮小されます。 2 つの余白のうち)。その結果、以下に示すように、内側の div は外側の div の上部に寄り添います。
[ネストされたマージン崩壊のイメージ]
マージン崩壊の防止
崩壊は以下を使用することで防ぐことができます:
これらの要素のいずれかを導入すると、折りたたみメカニズムが破壊され、個々のマージンが適用されます。
以上が垂直マージンの折りたたみはネストされた要素でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。