P粉5210131232023-08-22 17:46:33
私の知る限り、視覚的に影響を及ぼさないマージンの折りたたみを無効にする巧妙なトリックは、親要素のパディングを 0.05px
に設定することです:
パディングは 0 ではなくなったため、折り畳みは発生しませんが、同時にパディングが十分に小さいため、視覚的には 0 に丸められます。
追加のパディングが必要な場合は、マージンのつぶれを発生させたくない「方向」にのみパディングを適用します (例: padding-top: 0.05px;
)。
実際の例:
編集: 値を 0.1
から 0.05
に変更しました。 Chris Morgan が以下のコメントで述べたように、また この小さなテスト からもわかるように、Firefox は 0.1px
パディングを考慮しているようです。ただし、0.05px
は機能するようです。
P粉5886603992023-08-22 16:36:44
マージン崩壊には主に 2 つのタイプがあります:
後者の場合にのみ、パディングまたはボーダーを使用すると折り畳まれなくなります。さらに、親要素にデフォルト値 (visible
) とは異なる overflow
属性が適用されると、折り畳みが妨げられます。したがって、overflow: auto
と overflow: hidden
は同じ効果があります。おそらく hidden
を使用する場合の唯一の違いは、親要素の高さが固定されている場合、コンテンツが予期せず非表示になることです。
親要素に適用した場合にこの動作を修正するのに役立つその他のプロパティは次のとおりです。
フロート: 左/右
位置: 絶対
表示: フレックス/グリッド
ここでテストできます: http://jsfiddle.net/XB9wX/1/。
いつものように、Internet Explorer は例外であることを付け加えておきます。具体的には、IE 7 では、親要素に特定のレイアウト(width
など)を指定した場合、余白が崩れません。
出典: サイトポイントの記事折りたたみマージン