web-dev-qa-db-ja.com

マージンが親要素に含まれないのはなぜですか？

マージンのあるエレメントが別のエレメント内に含まれている場合、親は常にそのマージンをラップ/包含しません。

多くのことが原因で、親に子のマージンが含まれます。

  • border: solid;
  • position: absolute;
  • display: inline-block;
  • overflow: auto;

（そして、これはほんの少しのテストからのものです、間違いなくもっとあります。）

私はこれがマージンの崩壊に関係していると思いますが、

  1. W3C仕様ページには、そのような動作の説明はありません。
  2. ここにはマージンの重複はありません。
  3. すべてのブラウザの動作は、この問題で一貫しているようです。
  4. 動作は、マージンに関連しないトリガーによって影響を受けます。

デフォルトでoverflow: autoに設定されている要素に、オーバーフローが自動に設定されているものとは異なるマテリアルを含める必要があるロジックは何ですか？

通常のdivのデフォルトの動作以外のすべてがマージンが親によって含まれていると仮定する必要があるのはなぜですか？通常のデフォルトがマージンを含まないのはなぜですか？

EDIT：最終的な答えは、W3Cが実際にこの動作を指定しているということですが、

  • 仕様は本当に意味をなさない。
  • スペックの説明、説明なし ：
    • 「自由余白」（親の上部または下部に接する余白は、親には含まれません）および
    • '折りたたまれたマージン'（隣接するマージンは重複することが許可されています）。

デモ：

body {
  margin: 0;
}

div.block {
  background-color: skyblue;
}
div.inline-block {
  display: inline-block;
  background-color: lawngreen;
}
div.position-absolute {
  background-color: rgba(255,255,0,.7);
  position: absolute;
  bottom: 0;
  right: 0;
}
div.overflow-auto {
  background-color: hotpink;
  overflow: auto;
}
div.border {
  background-color: aquamarine;
  border: solid;
}

h2 {
  margin: 80px;
  width: 250px;
  border: solid;
}
<div class="block">
  <h2>Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2>Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2>Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2>Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2>Is the margin contained (border)?</h2>
</div>
htmlcssmargin
52
SamGoody

これがCSSの仕組みです W3Cによると ：

この仕様では、マージンを折りたたむという表現は、2つ以上のボックス（互いに隣り合っているかネストされている可能性がある）の隣接するマージン（空ではないコンテンツ、パディング、境界領域、またはクリアランスで区切られていない）を組み合わせて、シングルマージン。

トップdivのケースに固有：

ボックスの上部と下部のマージンが隣接している場合、マージンがボックスを介して縮小する可能性があります。この場合、要素の位置は、マージンが縮小されている他の要素との関係に依存します。

  • 要素のマージンが親の上マージンで折りたたまれている場合、ボックスの上部ボーダーEdgeは親のマージンと同じになるように定義されます。
  • それ以外の場合は、要素の親がマージンの縮小に参加していないか、親の下部マージンのみが関係しています。要素の上ボーダーEdgeの位置は、要素に非ゼロの下ボーダーがあった場合と同じです。

私にできる最善のことは、あなたに "Collapsing Margins" on sitepoint（トミーオルソンとポールオブライエン）。彼らはveryの詳細な説明を行い、質問のサンプルコードでデモした動作を正確に示す例を示します。

27
Nick Craver