Поиск

Определение значений ширины и полей

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

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

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

Незамещаемые элементы строкового уровня

Если свойство '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. Если свойства 'height' и 'bottom' принимают значения 'auto', то свойству 'bottom' присваивается значение '0'.
  4. Если на этом этапе свойства 'bottom' и 'height' все еще принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-top' и 'margin-bottom', подставляется значение '0'.
  5. Если на данном этапе свойства 'margin-top' и 'margin-bottom' все еще принимают значения 'auto', то осуществляется решение упомянутого уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  6. Если на данном этапе в левой части уравнения имеется только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  7. Если на данном этапе значения остаются перегруженными, то значение, принимаемое свойством 'bottom', игнорируется и относительно него решается уравнение.