子要素の余白が親要素を移動する質問する

Question

代替案を見つけたDIV 内の余白を持つ子要素以下を追加することもできます:

.parent { overflow: auto; }

または：

.parent { overflow: hidden; }

これにより、マージンが崩壊. 境界線とパディングも同様です。したがって、上余白のつぶれを防ぐために、次のものを使用することもできます。

.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またはマージントリックを使用するとそれが実現します。

Answer 1