「親と最初/最後の子供」の「折りたたまれたマージン」がどのように機能するか分かりません

Question

私は現在MDNのcollapsed marginについて学んでいます。隣接する兄弟の折りたたみマージンはかなりわかりやすいです。しかし、私は崩壊したマージンが "親と最初/最後の子"、特に青で強調表示された最後の文に対してどのように機能するのか理解するのに苦労しています。

折りたたまれた余白が親の外側でどうして終わる可能性がありますか？私はそれを私の頭の中に描いているようには見えません。

Answer 1

これは役に立ちますか？ .inner上.outerと100pxマージンに50pxマージンが.innerから単一100px余白に崩壊している、とあなたが期待するよう.innerのマージンはむしろ内部よりも、親の外にあります。ここで

.outer { 
 
    background: #eee; 
 
    height: 100px; 
 
} 
 
.inner { 
 
    background: red; 
 
    height: 10px; 
 
    margin-top: 100px; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Answer 2

あなたのための興味深い例です。最初の親には境界線が設定されていません。それはあなたが子供の余白を使いたくないと自動的に仮定しますが、それは上から立っています。 2番目の例では、境界線が設定されています。ブラウザはh1タグのネイティブマージンを明示的に使用したいと仮定し、親がこれを表示するように適応します。

.parent1 { 
 
    background-color: #669; 
 
} 
 
.parent2 { 
 
    background-color: #969; 
 
    border: 1px solid #000; 
 
}

<div class="parent1"> 
 

 
    <h1>hello World</h1> 
 

 
</div> 
 

 
<div class="parent2"> 
 

 
    <h1>hello World</h1> 
 

 
</div>