Почему поле не содержалось бы родительским элементом?

Когда элемент с полем содержится в другом элементе, родитель последовательно не переносит/содержит то поле.

Много вещей заставят родителя содержать поле ребенка:

  • border: solid;
  • position: absolute;
  • display: inline-block;
  • overflow: auto;

(И это только от небольшого тестирования, несомненно существует больше.)

Я предположил бы, что это имеет отношение к выходящим из строя полям, но:

  1. Страница спецификации W3C не имеет никакого описания такого поведения.
  2. Здесь нет никаких перекрывающихся полей.
  3. Поведение всех браузеров, кажется, последовательно по этой проблеме.
  4. Поведение затронуто триггерами, которые не связаны с полями.

Что является логикой который элемент который значения по умолчанию к 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)?

51
задан mfluehr 18 September 2019 в 04:16
поделиться

1 ответ

Это то, как работает CSS в соответствии с W3C :

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

Более специфичны для вашего случая верхнего div:

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

  • Если поля элемента рухнуты сопутствующим родительским краем, верхняя граница коробки определяется так же, как родитель.
  • В противном случае либо родитель элемента не принимает участие в распадании маржи, либо участвуют только нижняя маржа родителей. Положение верхнего края границы элемента такое же, как было бы, если бы элемент имел ненулевую нижнюю границу.

Лучшее, что я могу сделать, это указать на вас на «рухнувшие поля» на площадке № (Tommy Olsson и Paul O'Brin) . Они делают Очень подробное объяснение с примерами, показывающими вас именно поведение, которое вы демонстрируете в примере вопроса код.

27
ответ дан 7 November 2019 в 10:25
поделиться