[解決済み] 子要素の余白が親要素を移動させる

質問

私は div ( 親 を含む別の div ( 子 ). 親要素は body を、特にCSSスタイル無しで表示します。を設定すると

.child
{
    margin-top: 10px;
}

最終的には、子の上部が親と一直線になるようにしました。子プロセスが10px下に移動する代わりに、親プロセスが10px下に移動します。

私の DOCTYPE が設定されています。 XHTML Transitional .

何が足りないのでしょうか？

編集1
私の親は、その下に上から下まで（ピクセル単位で）表示される必要がある背景があるため、厳密に定義された寸法を持つ必要があります。そのため、垂直方向の余白を設定することは ダメダメ .

編集2
この挙動はCRだけでなく、FF、IEでも同じです。

解決方法は？

で代替案を見つけました。 DIV内の余白のある子要素 追加することもできます。

.parent { overflow: auto; }

または

.parent { overflow: hidden; }

への余白を防ぐことができます。 崩壊 . Borderとpaddingも同じです。 従って、以下のようにしても、トップマージンの崩れを防ぐことができます。

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021年最新情報：もしもの時のために IE11のサポートを停止する を使用すると、新しい CSS 構文 display: flow-root . 参照 MDNウェブドックス は、ブロックフォーマットのコンテキストに関するすべての詳細についてです。

ご好評につき更新しました。 マージンを折りたたむことの要点は、テキストコンテンツを扱うことです。例えば

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

ブラウザは余白を縮めるので、テキストは思ったとおりに表示され <div> のラッパータグが余白に影響を与えることはありません。各要素はその周囲にスペースを確保しますが、スペースが2倍になることはありません。の余白は <h2> と <p> は足し算ではなく、互いにスライドしてしまう（崩れてしまう）。同じことが <p> と <ul> 要素を使用します。

悲しいことに、現代のデザインでは、このアイデアは、明示的にコンテナが必要な場合に噛み付かれることがあります。これは、新しい ブロックフォーマットコンテキスト をCSSで表現しています。その overflow や余白のトリックを使えば、それが可能になります。