レイアウトの外観に影響を与えずに CSS マージンの崩壊を防ぐにはどうすればよいですか?

CSS でのマージン折りたたみのオーバーライド

マージン折りたたみは、隣接するマージンを 1 つの大きなマージンにマージする CSS 機能です。これは、ピクセル完璧なマージンに依存するレイアウトでは問題になる可能性があります。

余分な要素による折りたたみを避ける

CSS チュートリアルでは、通常、折りたたみを防ぐために境界線またはパディングを追加することを推奨しています。ただし、これらの解決策では、不要な視覚効果が生じます。

非表示のスペーサー修正

これらの副作用を回避するには、非表示のスペーサー要素の使用を検討してください。この要素は次の方法で実現できます。

<div>
<p>このスペーサーは、要素間にサイズ 0 の不連続性を作成することでマージンの崩壊を防ぎます。</p>
<p><strong>例</strong></p>
<p>次の HTML コードは、 spacer:</p>
<pre class="brush:php;toolbar:false">
    
        <div><p>このコードは、3 つの要素を 100 ピクセルのマージンでレンダリングします。要素間のマージンは折りたたまれません。</p></div>