55

マージンを持つ要素が別の要素内に含まれている場合、親は一貫してそのマージンをラップ/包含しません。

多くの場合、親に子のマージンが含まれます。

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

(そして、これはほんの少しのテストからのもので、他にもあることは間違いありません。)

これはマージンの崩壊に関係していると思いますが、次のとおりです。

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

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

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

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

  • スペックに特に意味はありません。
  • 説明の言葉なしで、仕様が混在しています。
    • 'free margins' (親の上部または下部に触れるマージンは、親には含まれません) および
    • 'collapsed margins' (隣接するマージンを重ねることができます)。

デモ：

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>

4

1 に答える 1

30

これは、W3C に従ってCSS がどのように機能するかです。

この仕様では、マージンを折りたたむという表現は、2 つ以上のボックス (互いに隣り合っているか入れ子になっている可能性がある) の隣接するマージン (空でないコンテンツ、パディング、境界領域、またはそれらを分離するクリアランスがない) が結合して、シングルマージン。

一番上の div のケースにより具体的に:

ボックスの上マージンと下マージンが隣接している場合、マージンがそれを介して崩壊する可能性があります。この場合、要素の位置は、マージンが折りたたまれている他の要素との関係によって異なります。

  • 要素の余白が親の上余白と一緒に折りたたまれている場合、ボックスの上端は親と同じになるように定義されます。
  • それ以外の場合、要素の親がマージンの縮小に参加していないか、親の下マージンのみが関与しています。要素の上境界線の位置は、要素にゼロ以外の下境界線がある場合と同じです。

私にできる最善のことは、sitepoint (Tommy Olsson と Paul O'Brien による)の"Collapsing Margins" を紹介する ことです。質問のサンプルコードでデモした動作を正確に示す例を使用して、非常に詳細な説明を行います。

于 2010-02-01T12:37:42.393 に答える