web-dev-qa-db-ja.com

マージンの折りたたみを無効にする方法は？

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

csscss3margincollapse
164
kjo

マージンの折りたたみには、主に2つのタイプがあります。

  • 隣接する要素間のマージンの折りたたみ
  • 親要素と子要素の間の折りたたみマージン

パディングまたはボーダーを使用すると、後者の場合にのみ崩壊を防ぐことができます。また、親に適用されるデフォルト（overflow）と異なるvisibleの値は、崩壊を防ぎます。したがって、overflow: autoとoverflow: hiddenの両方に同じ効果があります。おそらく、hiddenを使用する場合の唯一の違いは、親の高さが固定されている場合にコンテンツを非表示にすることの意図しない結果です。

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

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

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

通常どおり、Internet Explorerは例外です。より具体的には、IE 7では、widthなど、親要素に何らかの種類のレイアウトが指定されている場合、マージンは縮小されません。

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

217
hqcasanova

これには、古き良きマイクロクリアフィックスを使用することもできます。

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

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

52
Blackgrid

私の知る限り、視覚的な影響のないマージンの折りたたみを無効にする巧妙なトリックの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はトリックを行うようです。

43
Nicu Surdu

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

これとあなたが言及したこととは別に、あなたはそれを実際に学び、実際に有用であるこの日のために学ぶ必要があります（3年から5年ごとに来ます）。

20
Litek

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

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

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

MozillaのCSS Webkit拡張機能ページ をチェックすると、これらのプロパティは独自のものとしてリストされ、使用しないことをお勧めします。これは、彼らがすぐに標準CSSに移行する可能性が低く、Webkitベースのブラウザのみがそれらをサポートするためです。

9
Dan Carter

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

7
Genzo

実際、完璧に機能するものがあります：

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

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>
5
Daniel Koster

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

こちらISテストするプレイグラウンド

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

いつ

  • マージンcollapsingはdisabled、背景が赤のdiv.absoluteはページの一番上。
  • マージンは折りたたまれていますdiv.absoluteはdiv.marginと同じY座標に配置されます
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の例を編集できます

2
Buksy

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

.parent {
  display: grid
}
0
Whisher