余白折りを無効にする方法

Question

余白折りを完全に無効にする方法はありますか?私が見つけた唯一の解決策 (「展開」という名前) は、1 ピクセルの境界線または 1 ピクセルのパディングを使用することです。これは容認できないと思います。余分なピクセルによって計算が不必要に複雑になります。このマージンの縮小を無効にする、より合理的な方法はあるでしょうか?

Answer 1

私の知る限り、視覚的に影響を及ぼさないマージンの折りたたみを無効にする巧妙なトリックは、親要素のパディングを 0.05px に設定することです:

リーリー

パディングは 0 ではなくなったため、折り畳みは発生しませんが、同時にパディングが十分に小さいため、視覚的には 0 に丸められます。

追加のパディングが必要な場合は、マージンのつぶれを発生させたくない「方向」にのみパディングを適用します (例: padding-top: 0.05px;)。

実際の例:

リーリー リーリー

編集: 値を 0.1 から 0.05 に変更しました。 Chris Morgan が以下のコメントで述べたように、また この小さなテスト からもわかるように、Firefox は 0.1px パディングを考慮しているようです。ただし、0.05px は機能するようです。

Answer 2

マージン崩壊には主に 2 つのタイプがあります:

• 隣接する要素間のマージンの崩壊
• 親要素と子要素の間のマージンの崩壊

後者の場合にのみ、パディングまたはボーダーを使用すると折り畳まれなくなります。さらに、親要素にデフォルト値 (visible) とは異なる overflow 属性が適用されると、折り畳みが妨げられます。したがって、overflow: auto と overflow: hidden は同じ効果があります。おそらく hidden を使用する場合の唯一の違いは、親要素の高さが固定されている場合、コンテンツが予期せず非表示になることです。

親要素に適用した場合にこの動作を修正するのに役立つその他のプロパティは次のとおりです。

• フロート: 左/右
• 位置: 絶対
• 表示: フレックス/グリッド

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

いつものように、Internet Explorer は例外であることを付け加えておきます。具体的には、IE 7 では、親要素に特定のレイアウト（width など）を指定した場合、余白が崩れません。

出典: サイトポイントの記事折りたたみマージン