Когда края соседнего внутреннего и внешнего элемента разрушаются

Question

Я читал, что если один элемент вложен в другой, и у них обоих есть поля, то они могут разрушиться (при условии, что их вертикальные поля соприкасаются).

а) При каких условиях их вертикальные поля будут касаться? Возможно, только когда родительский элемент имеет фиксированную высоту, а внутренние элементы занимают больше вертикального пространства, чем родительский элемент имеет в своем распоряжении (я немного поэкспериментировал, но не думаю, что мне удалось вызвать вертикальные поля смежных внутренних и внешний элемент рухнуть)?

б) В любом случае, я не совсем понимаю, почему было бы хорошей идеей (с точки зрения дизайнера), чтобы края внутреннего и внешнего элемента разрушались?

в) Предполагая, что внутренний элемент имеет отступ 100px, а внешний элемент - 20px, когда два поля сужаются, тогда оба элемента будут иметь отступ 100px?

В любом случае, мне все еще трудно это визуализировать. А именно, обычно касание полей - это нижнее поле и верхнее поле, но здесь оба поля - либо нижнее поле, либо верхнее поле

1027 * спасибо *

EDIT:

1) Поскольку в следующем примере (взятом из предоставленной вами ссылки) поля div и h1 свернуты, я ожидаю, что наибольшая часть букв в Элемент h1 будет касаться верхнего края элемента div (то есть верхней стороны оранжевого прямоугольника), но вместо этого между буквами и буквой будет немного места (несколько миллиметров) верхняя сторона прямоугольника. Это почему?

#masthead {background: #F80; margin: 10px;}
#masthead h1 {margin: 20px 10px;}
#masthead p {margin: 5px 10px; font-style: italic;}


<div id="masthead">
<h1>ConHugeCo</h1>
<p>Making the world safe for super sizes</p>
</div>

2) Почему применение отступов приводит к тому, что поля (родительского элемента div и дочернего элемента h1 ) не разрушаются? Потому что теперь поле h1 не начинается в том же месте (это место является верхней стороной оранжевого прямоугольника), а поле родительского div ?!

1067 * спасибо *

Answer 1

Эрик Мейер знает чушь о CSS.

Ознакомьтесь с этой статьей он написал о сворачивающихся полях, почему они происходят и как их остановить, когда вам нужно.

Редактировать: обновляется после вашего обновления.

1) Я предполагаю, что буквы из h1 не касаются div из-за высоты строки. Строка текста имеет некоторое пространство над ней на основе высоты строки, которая не имеет ничего общего с полем или отступом. Попробуйте изменить это, если хотите, чтобы они были полностью сброшены.

2) Я не знаю точных аргументов в пользу того, почему поля не разрушаются, когда также используется заполнение. Я собираюсь предположить, что это как-то связано со спецификациями коробочных моделей ...