親要素に常に一貫して子要素のマージンが含まれないのはなぜですか?

親要素の一貫性のないマージンの包含

マージンのある要素が別の要素内に配置されている場合、親要素は常に一貫してラップまたはラップするわけではありません。そのマージンを含みます。この矛盾は、特にボーダー、位置、表示、オーバーフローなどの他のプロパティの動作と比較した場合、直観に反しているように見えます。

マージンの重なりと折りたたみ

直感的には、 CSS 仕様で説明されているように、マージンの折りたたみがこ​​の動作に影響を与えると仮定します。ただし、マージンの重なりがなく、ブラウザ間で一貫した動作が行われているにも関わらず、この不一致の原因は別の場所にあります。

マージン抑制の背後にあるロジック

CSS 仕様では、実際には次のように定義されています。この行動にはいくつかの矛盾があります。仕様では、「フリー マージン」 (親要素を超えて広がるマージン) と「折りたたまれたマージン」 (重なり合う隣接するマージン) の両方について説明していますが、それぞれが適用される条件を明確に区別することはありません。

デモ結論

次のデモは、この矛盾した動作を示しています。

<code class="html"><div class="block">
  <h2 style="margin: 80px;">Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2 style="margin: 80px;">Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2 style="margin: 80px;">Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2 style="margin: 80px;">Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2 style="margin: 80px;">Is the margin contained (border)?</h2>
</div></code>

「block」要素 (デフォルトのマージン動作) を他のすべての要素と比較すると、矛盾は明らかです。要素。通常の div のデフォルトの動作を除くすべては、マージンが親に含まれることを前提としているようです。

この複雑な動作は、マージンの縮小と空きマージンに関する CSS 仕様のあいまいさに起因します。残念ながら、ドキュメントには、これらの概念が境界線、位置、オーバーフローなどのさまざまな要素プロパティとどのように相互作用するかについて明確な説明がありません。

以上が親要素に常に一貫して子要素のマージンが含まれないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。