Модель визуального форматирования. Детали

Вычисление высоты и полей

Для вычисления значений 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' обязано быть проведено разграничение между различными видами боксов:

1. инлайн, незамещаемые элементы
2. инлайн, замещаемые элементы
3. уровень блока, незамещаемые элементы при нормальном всплывании
4. уровень блока, замещаемые элементы при нормальном всплывании
5. всплывание, незамещаемые элементы
6. всплывание, замещаемые элементы
7. абсолютно позиционированные незамещаемые элементы
8. абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

Инлайн, незамещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Свойство 'height' не применяется, но высота бокса задаётся свойством 'line-height'.

Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.

Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы уровня блока. Если он имеет дочерние элементы только инлайн-уровня, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы уровня блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса уровня блока до нижнего края рамки самого нижнего дочернего бокса уровня блока. В расчёт берутся только потомки при нормальном всплывании (т.е. боксы-поплавки и абсолютно позиционированные боксы игнорируются, а относительно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.

Абсолютно позиционированные незамещаемые элементы

Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

(Если стиль рамки - 'none', '0' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:

1. Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
2. Если и 'height' и 'bottom' - 'auto', 'bottom' заменяется на '0'.
3. Если 'bottom' или 'height' (ещё) имеют значение 'auto', любое 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.
4. Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
5. Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
6. Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.

Абсолютно позиционированные замещаемые элементы

Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен теперь:

1. Если 'height' - 'auto', оно заменяется внутренней высотой элемента.
2. Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
3. Если 'bottom' - 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.
4. Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
5. Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
6. Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.