CSS でのマージン折りたたみはどのように機能しますか?

マージンの折りたたみ: 説明

CSS では、マージンの折りたたみは、Web ページ上の隣接する要素の間隔に影響を与える動作です。

マージンについて折りたたみ

一般的な考えに反して、要素にマージン、パディング、境界線が設定されていない場合、マージンの折りたたみは発生しません。代わりに、2 つの隣接する垂直マージンが存在する場合に発生します。このような場合、2 つのマージンのうち大きい方が適用され、小さい方は無視されます。

マージン コラプスの例

次の例を考えてみましょう:

<div>Block A</div>
<div>Block B</div>

ブロック A の下マージンが 3em、ブロック B の上マージンが 2em であると仮定します。他のスタイルを適用しない場合、ブロック A の下マージンが 2 つのうちの大きい方であるため、ブロック間の垂直方向の間隔は 3em になります。

マージンの崩壊を防ぐ

隣接する要素に境界線やパディングを追加することで、マージンの崩れを防ぐことができます。これにより、余白が 0 に設定されている場合でも、要素間にギャップが作成されます。

たとえば、ブロック B に 1 ピクセルの上境界線を追加すると、ブロック間の垂直方向の間隔は 5em になります。

結論

マージンの折りたたみは、CSS スタイルの基本的な側面であり、スペースに影響します。 Web ページ上の要素。意図したレイアウトを作成し、予期しない結果を回避するには、マージンの崩壊が発生する条件を理解することが重要です。

以上がCSS でのマージン折りたたみはどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。