Когда элемент с полем содержится в другом элементе, родитель последовательно не переносит/содержит то поле.
Много вещей заставят родителя содержать поле ребенка:
border: solid;
position: absolute;
display: inline-block;
overflow: auto;
(И это только от небольшого тестирования, несомненно существует больше.)
Я предположил бы, что это имеет отношение к выходящим из строя полям, но:
Что является логикой который элемент который значения по умолчанию к overflow: auto
должен содержать другой материал, чем тот, где переполнение установлено на автоматический?
Почему должен все кроме поведения по умолчанию регулярного отделения предполагать, что поле содержится родителем – и почему регулярное значение по умолчанию не должно включать поле?
Править: Окончательный ответ - то, что W3C действительно указывает это поведение, но что:
Демонстрация:
body {
margin: 0;
}
div.block {
background-color: skyblue;
}
div.inline-block {
display: inline-block;
background-color: lawngreen;
}
div.position-absolute {
background-color: rgba(255,255,0,.7);
position: absolute;
bottom: 0;
right: 0;
}
div.overflow-auto {
background-color: hotpink;
overflow: auto;
}
div.border {
background-color: aquamarine;
border: solid;
}
h2 {
margin: 80px;
width: 250px;
border: solid;
}
Is the margin contained (block)?
Is the margin contained (inline-block)?
Is the margin contained (position-absolute)?
Is the margin contained (overflow-auto)?
Is the margin contained (border)?
Это то, как работает CSS в соответствии с W3C :
в этой спецификации, выражение краска выражения означает, что прилегающие поля (без него не пустое содержание, прокладка или пограничные районы или оформление отделяют их) из двух или более коробок (которые могут быть рядом с одним или вложенным) комбинатом, чтобы сформировать одноразовое поле.
Более специфичны для вашего случая верхнего div:
, если верхняя и нижняя поля коробки примыкаются, то для порыва можно свернуть через него. В этом случае положение элемента зависит от его отношений с другими элементами, поля которых рухнут.
- Если поля элемента рухнуты сопутствующим родительским краем, верхняя граница коробки определяется так же, как родитель.
- В противном случае либо родитель элемента не принимает участие в распадании маржи, либо участвуют только нижняя маржа родителей. Положение верхнего края границы элемента такое же, как было бы, если бы элемент имел ненулевую нижнюю границу.
Лучшее, что я могу сделать, это указать на вас на «рухнувшие поля» на площадке № (Tommy Olsson и Paul O'Brin) . Они делают Очень подробное объяснение с примерами, показывающими вас именно поведение, которое вы демонстрируете в примере вопроса код.