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

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

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

  • 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
поделиться