202

マージンの縮小を完全に無効にする方法はありますか？私が見つけた唯一の解決策（「折りたたみ解除」という名前）は、1pxの境界線または1pxのパディングを使用することを伴います。これは受け入れられないことです。無関係なピクセルは、理由もなく計算を複雑にします。このマージンの縮小を無効にするより合理的な方法はありますか？

css margin collapse

— kjo
ソース

4

：フレックスまたはグリッドレイアウト、マージン崩壊が存在していない使用stackoverflow.com/a/46496701/3597276

— マイケル・ベンジャミン

単に要素に値を与えることmargin-bottomなく残すmargin-top0が

— ダンブレイ

私は計算を簡単にするためにパッケージを作成しました：npmjs.com/package/collapsed-margin

— Owen M

254

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

隣接する要素間のマージンの集約
親要素と子要素の間のマージンの集約

パディングまたはボーダーを使用すると、後者の場合にのみ折りたたみが防止されます。また、親に適用されている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の記事Collapsing Margins

— hqcasanova
ソース

1

ゼロの値でない場合、パディングもこれに影響を与える可能性があることに注意してください

— Mladen Janjetovic 2014年

3

overflow: autoオーバーフローコンテンツをオーバーフローさせるのではなく、親要素にスクロールバーが表示される可能性があることに注意してくださいoverflow: visible。

— レオ

「overflow：auto」はChrome v44では機能しないようです。

— tkane2000 2015

3

表示をありがとう：インラインブロック、それは私を救った:)

— alexcasalboni 2017年

3

flexデフォルトと異なる値でもマージンの縮小は無効になります

— Oly

60

これには、古き良きマイクロclearfixを使用することもできます。

#container:before, #container:after{
    content: ' ';
    display: table;
}

更新されたフィドルを参照してください：http : //jsfiddle.net/XB9wX/97/

— ブラックグリッド
ソース

私の答えをコミュニティーwikiに変えました。お気軽にご回答ください。ありがとう。

— hqcasanova 2014年

3

例を見るとわかりません。マージンが崩れています（div間の垂直方向のスペースが20pxではなく10pxしかない）

— Andy

1

これは、すべてこのクリアフィックスが適用されている兄弟間の折りたたみを取り除く場合にのみ役立ちます。私はこれを示すために例を分岐しました：jsfiddle.net/dpyuyg07 ---そしてそれさえすべての話ではありません。それはあなたがその修正を適用した要素の子から生じるマージンの崩壊を取り除くだけです。コンテナー自体にマージンを追加すると、マージンは折りたたまれます。これはこのフォークで確認できます：jsfiddle.net/oew7qsjx

— NicBright

4

これをさらに正確に説明できます。clearfixメソッドは、親と子の間のマージンの縮小のみを防止します。隣接する兄弟間の折りたたみには影響しません。

— NicBright 2015年

BootstrapがDOM :beforeと:after要素で埋める傾向を理解できたと思います。このルールをスタイルシートに追加しました：div:before, div:after{content: ' '; display: table;}。素晴らしい。突然、予期したとおりに動作し始めます。

— Stijn de Witt

59

私が知る限り、視覚的な影響を与えないマージンの縮小を無効にする巧妙なトリックの1つは、親のパディングを次のように設定すること0.05pxです。

.parentClass {
    padding: 0.05px;
}

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

他のパディングが必要な場合は、たとえば、マージンの縮小が不要な「方向」にのみパディングを適用しますpadding-top: 0.05px;。

作業例：

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

スニペットを展開

編集：値をから0.1に変更しました0.05。Chris Morganが以下のコメントで述べているように、この小さなテストから、Firefoxは実際に0.1pxパディングを考慮しているようです。しかし、0.05pxトリックを行うにはシーム。

— ニクスルドゥ
ソース

2

これが私のお気に入りのソリューションです。これをデフォルトのスタイルとして含めることもできます。何故なの？*{padding-top:0.1px}。すべてのブラウザで動作することは確かですか？

— Nick Manning

これまでのところ、私にとってはかなりうまくいきましたが、ほとんどのブラウザーで徹底的にテストしたとは主張していません。

— Nicu Surdu 2016

2

非常に優れたソリューションであり、ほとんどのブラウザで期待どおりに動作するようです。共有してくれてありがとう！

— ワイヤードルフィン2016

1

これは、と危険なソリューションですんによる高DPIディスプレイとサブピクセルの計算に、さまざまな状況で、余分なピクセルを追加します。（Firefoxは古くからサブピクセルレイアウトを行っています。他のブラウザも比較的最近それに倣っていると思います。）

— Chris Morgan

0.05pxランダムなブラウザのだまされた数ではなく、まだ特定の選択のように思われ0.01pxます。

— Volker E.

22

overflow:hidden マージンの崩れを防ぎますが、副作用がないわけではありません。つまり、オーバーフローを隠します。

これとは別に、あなたが言ったことをライブで学び、実際に役立つこの日のために学ばなければなりません（3〜5年ごとに行われます）。

— Litek
ソース

私の答えをコミュニティーwikiに変えました。2つ目の段落の最後の2行で述べた副作用については説明したと思います。おそらく、hiddenを使用した場合の唯一の違いは、親の高さが固定されている場合にコンテンツを非表示にした場合の意図しない結果です。ただし、さらに明確にする必要があると思われる場合は、遠慮なく貢献してください。ありがとう。

— hqcasanova 2014年

7

overflow: auto隠されたオーバーフローを防ぎ、マージンの縮小を防ぐために使用するとよいでしょう。

— ギャビン

@Gavin overflow:auto;によって、コンテンツ領域に一部のページでスクロールバーが表示されるようになりました。

— リード

13

実際、問題なく動作するものがあります。

ディスプレイ：フレックス; フレックス方向：列;

IE10以降のみをサポートして生活できる限り

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

スニペットを展開

— ダニエル・コスター
ソース

これが一般的なソリューションとして機能するため<div>には.container、内にエクストラを追加する必要があります。追加しない場合、.containerはその子のボックスモデルを制御します。たとえば、インライン要素は全幅のブロック要素になります。マージンがある場合は、マージンも折りたたまれます。

— zupa

9

すべてのWebkitベースのブラウザがプロパティをサポートする必要があります-webkit-margin-collapse。上部または下部のマージンにのみ設定するサブプロパティもあります。値を折りたたむ（デフォルト）、破棄する（隣接するマージンがある場合はマージンを0に設定する）、分離する（マージンの折りたたみを防ぐ）ことができます。

私はこれがChromeとSafariの2014バージョンで動作することをテストしました。残念ながら、それはwebkitに基づいていないので、IEではサポートされないと思います。

完全な説明については、AppleのSafari CSSリファレンスをお読みください。

MozillaのCSS Webkit拡張ページを確認すると、これらのプロパティがプロプライエタリとしてリストされており、使用しないことをお勧めします。これは、彼らがすぐに標準のCSSに入る可能性が低く、Webkitベースのブラウザーのみがそれらをサポートするためです。

— ダン・カーター
ソース

これは、SafariとChromeがマージンを処理する方法の不整合を解消するのに役立つので、すばらしいことです。

— bjudson 2015年

8

私はこれが非常に古い投稿であることを知っていますが、親要素でflexboxを使用すると、その子要素のマージンの縮小が無効になると言いたいだけです。

— 源蔵
ソース

子要素だけでなく、親と最初の子および最後の子の間のマージンの縮小も防止します。

— Sven Marnach

2

親がposition親族に設定しているため、マージンの崩壊について同様の問題がありました。以下は、マージンの折りたたみを無効にするために使用できるコマンドのリストです。

ここにテスト用のプレイグラウンドがあります

任意のparent-fix*クラスをdiv.container要素に、または任意のクラスchildren-fix*をに割り当ててみてくださいdiv.margin。ニーズに最も適したものを選択してください。

いつ

マージンの折りたたみが無効になり、div.absolute赤い背景がページの最上部に配置されます。
マージンは折りたたま div.absoluteれていますと同じY座標に配置されますdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

スニペットを展開

ここにあなたが編集できる例のjsFiddleがあります

— ブクシー
ソース

1

新しいブラウザー（IE11を除く）では、親子マージンの折りたたみを防ぐ簡単なソリューションはを使用することdisplay: flow-rootです。ただし、隣接する要素が折りたたまれるのを防ぐには、他の手法も必要です。

デモ（変更前）

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

スニペットを展開

デモ（後）

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

スニペットを展開

— チュアンチーサン
ソース

0

あなたの情報については、グリッドを使用できますが、副作用があります:)

.parent {
  display: grid
}

— ウィシャー
ソース

マージンの縮小を無効にする方法は？

ここにテスト用のプレイグラウンドがあります