[解決済み】margin-collapsingを無効にする方法は？

質問

マージン折りたたみを完全に無効にする方法はありますか？ 私が見つけた唯一の解決策は（quot;uncollapsing"という名前で）、1pxのボーダーまたは1pxのパディングを使用することを必要とするものでした。 私はこれを受け入れられません。余分なピクセルが無意味に計算を複雑にします。 この余白の折りたたみを無効にする、もっと合理的な方法はないでしょうか？

解決方法は？

余白の崩れ方には、大きく分けて2種類あります。

• 隣接する要素間の余白の折りたたみ
• 親要素と子要素の間の余白の折りたたみ

paddingやborderを使用すると、後者の場合のみ崩壊を防ぐことができます。また overflow デフォルトとは異なる ( visible ) を親に適用すると、折りたたみを防ぐことができます。したがって overflow: auto と overflow: hidden は同じ効果を持ちます。おそらく hidden は、親の高さが固定されている場合、コンテンツを隠してしまうという予期せぬ結果をもたらします。

親に適用すると、この動作を修正するのに役立つ他のプロパティは、次のとおりです。

• float: left / right
• position: absolute
• display: inline-block / flex

ここですべてのテストができます。 http://jsfiddle.net/XB9wX/1/ .

例によって、Internet Explorerは例外であることを付け加えておく。具体的には、IE 7では、親要素に何らかのレイアウトが指定されている場合、マージンが崩れることはありません。 width .

出典 Sitepointの記事 マージンの折りたたみ