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

ピクセル調整なしのマージン崩壊の防止

CSS でのマージンの崩壊は、ピクセルパーフェクトなレイアウトを試みるときに迷惑になる可能性があります。ボーダーやパディングを追加する一般的に推奨される解決策には、望ましくない副作用が伴うことがよくあります。

幸いなことに、見た目を変えずにマージンの折りたたみを無効にする簡単な方法があります。

非表示のオプションを使用する 内部 div と オーバーフロー: 非表示、高さ: 0px、幅: 0px:

<div>
<p>マージンが折りたたまれている要素の間にこの区切り線を挿入すると、レイアウトに目に見える変更を加えることなく、効果的に折りたたみを解除できます。</p>
<p>例:</p>
<pre class="brush:php;toolbar:false"><div><p>この方法では、意図した間隔と外観を維持しながら、マージンの折りたたみが無効になります。レイアウト。</p></div>