margin-collapsingを完全に無効にする方法はありますか? 私が見つけた唯一の解決策(uncollapsing"という名前)は、1pxのボーダーまたは1pxのパディングを使用することです。 余分なピクセルが意味もなく計算を複雑にしてしまうからです。 このマージンの折り返しを無効にする、より合理的な方法はありませんか?
証拠金割れには大きく分けて2種類あります。
パディングやボーダーを使用すると、後者の場合にのみ崩れを防ぐことができます。また、親要素に適用される overflow
の値がデフォルト (visible
) 以外であれば、折り畳みを防ぐことができます。したがって、overflow: auto
と overflow: hidden
のどちらを使っても同じ効果が得られます。おそらく hidden
を使用した場合の唯一の違いは、親の高さが固定されている場合にコンテンツが隠れてしまうという意図しない結果になることです。
親に適用されると、この動作を修正するのに役立つ他のプロパティがあります。
position: absolute
(位置: 絶対)display: inline-block
(インラインブロック)ここでは、それらすべてをテストすることができます。[
][1].いつものように、Internet Explorerは例外であることを付け加えておきます。具体的には、IE 7 では、親要素に width
などの何らかのレイアウトが指定されている場合、マージンが折りたたまれません。
ソースはこちら。Sitepoint'の記事 Collapsing Margins。