пытается понять, как работает «рухнувший край» для «родителя и первого/последнего ребенка»

Question

В настоящее время я изучаю collapsed margin на MDN. Свернутый запас для смежных братьев и сестер довольно легко понять. Тем не менее, я изо всех сил пытаюсь понять, как рухнувший край работает для «родителя и первого/последнего ребенка», особенно последнее предложение, выделенное синим цветом.

Как могли бы свернуть маржи за пределами родителя? Я не могу представить это в моей голове.

Answer 1

ли эта помощь? Граница 50px на .outer и 100px маржа на .inner рухнула до предела 100px с .inner и маржа .inner вне родительского, а не внутри, как вы ожидали.

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

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

Answer 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>