10 Подробное описание модели визуального форматирования

Содержание

10.1 Определение "контейнера"

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

  1. Контейнер (он называется начальным контейнером), в котором отображается корневой элемент, выбирается агентом пользователя.
  2. Для любого другого элемента, если он не является абсолютно позиционируемым, контейнер определяется краевой линией информативной области ближайшего блока, выступающего в качестве предка данного элемента.
  3. Если элемент имеет свойство 'position: fixed', то контейнер задается областью просмотра.
  4. Если элемент имеет свойство 'position: absolute', то контейнер назначается ближайшим предком, для свойства 'position' которого установлено значение, отличное от 'static'. Это осуществляется следующим образом:
    1. Если предок принадлежит уровню блока, то контейнер определяется его краевой линией отступов.
    2. Если предок принадлежит строковому уровню, то контейнер определяется значением его свойства 'direction':
      1. Если свойство 'direction' принимает значение 'ltr', то верхний и левый сегменты границы контейнера определяются верхним и левым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и правый сегменты его границы определяются нижним и правым сегментами краевой линии информативной области последнего блока, порожденного предком.
      2. Если свойство 'direction' принимает значение 'rtl', то верхний и правый сегменты границы контейнера определяются верхним и правым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и левый сегменты его границы определяются нижним и левым сегментами краевой линии информативной области последнего блока, порожденного предком.

    Если такого предка не существует, то контейнер определяется краями информативной области блока, порожденного корневым элементом.

Пример(ы):

В документе

<HTML>
   <HEAD>
      <TITLE>Пример контейнеров</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Это текст первого абзаца...</P>
      <P id="p2">Это текст <EM id="em1"> 
      <STRONG id="strong1">второго</STRONG> абзаца.</EM></P>
      </DIV>
   </BODY>
</HTML>


не осуществляется позиционирование элементов. Назначение контейнеров здесь происходит следующим образом:

для блока, порожденного элементом контейнер назначается элементом
bodyначальный контейнер (назначается агентом пользователя)
div1body
p1div1
p2div1
em1p2
strong1p2

Если осуществить позиционирование элемента "div1":

#div1 { position: absolute; left: 50px; top: 50px }

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

Если осуществить позиционирование элемента "em1":

#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

то таблица контейнеров примет вид:

для блока, порожденного элементом контейнер назначается элементом
bodyначальный контейнер
div1начальный контейнер
p1div1
p2div1
em1div1
strong1em1

После позиционирования "em1" его контейнером становится ближайший позиционированный блок, порожденный его предком (т.е. элементом "div1").

10.2 Ширина содержимого: свойство 'width'

'width'
Значение:  <длина> | <проценты> | auto | inherit
Начальное значение:  auto
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк
Наследование:  нет
Процентное задание:   относительно ширины контейнера
Устройства:   визуального форматирования

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

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

Ширина блока замещаемого элемента является его внутренним параметром и может регулироваться агентом пользователя, если значение этого свойства отлично от 'auto'.

Значения данного свойства имеют следующий смысл:

<длина>
Определяет фиксированное значение ширины.
<проценты>
Определяет значение ширины в процентах. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока.
auto
Ширина зависит от значений других свойств. См. следующие ниже разделы.

Отрицательные значения свойства 'width' недопустимы.

Пример(ы):

Например, согласно следующему правилу ширина содержимого абзацев устанавливается равной 100 пикселам:

P { width: 100px }

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

Вычисляемые значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' элементов находятся в тесной взаимосвязи, а также зависят от типа генерируемого блока. За некоторыми исключениями (в частности, значение 'auto' заменяется в некотором смысле более подходящим значением) вычисляемые значения совпадают с зарезервированными. При этом необходимо различать следующие ситуации:

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

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

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

Свойство 'width' не применяется. Зарезервированное значение 'auto' свойства 'left', 'right', 'margin-left' или 'margin-right' заменяется вычисляемым значением '0'.

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

Зарезервированное значение 'auto' свойства 'left', 'right', 'margin-left' или 'margin-right' заменяется вычисляемым значением '0'. Зарезервированное значение 'auto' свойства 'width' позволяет определить внутреннее значение ширины элемента как вычисляемое значение.

10.3.3 Незамещаемые элементы уровня блока в нормальном потоке

Если для свойства 'left' или 'right' установлено значение 'auto', то его вычисляемое значение равно '0'. Другие свойства должны удовлетворять следующему ограничению:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина контейнера

(Если свойство стиля границы принимает значение 'none', то в качестве значения ширины границы следует использовать значение '0'.) Если все из вышеперечисленных свойств принимают значение, отличное от 'auto', то говорят, что значения "перегружены", и считают при этом, что вычисленное значение хотя бы одного свойства не совпадает с зарезервированным. Если свойство 'direction' принимает значение 'ltr', то свойству 'margin-right' присваивается не зарезервированное значение, а вычисленное, исходя из справедливости вышеописанного равенства. Если свойство 'direction' принимает значение 'ltr', то аналогичные действия осуществляются со свойством 'margin-left'.

Если из всех вышеназванных свойств только одно принимает значение 'auto', то его вычисляемое значение определяется путем решения данного равенства.

Если свойство 'width' принимает значение 'auto', то значения 'auto' всех других свойств устанавливаются равными '0', а значение свойства 'width' вычисляется из получившегося в результате этого равенства.

Если свойства 'margin-left' и 'margin-right' оба принимают значение 'auto', то их вычисляемые значения совпадают.

10.3.4 Замещаемые элементы уровня блока в нормальном потоке

Если свойство 'left' или 'right' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойство 'width' принимает значение 'auto', то в качестве его вычисляемого значения будет выступать значение внутренней ширины элемента. Если значение одного из свойств полей устанавливается равным 'auto', то его вычисляемое значение определяется в соответствии с приведенными выше ограничениями. Более того, если свойства обоих полей принимают значение 'auto', то их вычисляемые значения совпадают.

10.3.5 Незамещаемые перемещаемые элементы

Если свойство 'left', 'right', 'width', 'margin-left' или 'margin-right' принимает значение 'auto', то его вычисляемое значение равно '0'.

10.3.6 Замещаемые перемещаемые элементы

Если свойство 'left', 'right', 'margin-left' или 'margin-right' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойству 'width' присваивается значение 'auto', то в качестве его вычисляемого значения выступает внутреннее значение ширины элемента.

10.3.7 Незамещаемые абсолютно позиционируемые элементы

Ограничение, которое определяет вычисляемые значения этих элементов состоит в следующем:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина контейнера

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

  1. Если свойства 'left' и 'direction' принимают значения 'auto' и 'ltr', соответственно, то вместо 'auto' подставляется значение расстояния от левого сегмента края контейнера до левого сегмента краевой линии поля гипотетического блока, который был бы первым блоком элемента, если бы для его свойства 'position' было установлено значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агента пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает отрицательное значение.
  2. Если свойства 'right' и 'direction' принимают значения 'auto' и 'rtl', соответственно, то вместо 'auto' подставляется значение расстояния от правого сегмента края контейнера до правого сегмента краевой линии поля уже упоминавшегося гипотетического блока. Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает положительное значение.
  3. Если свойство 'width' принимает значение 'auto', то вместо всех значений 'auto', принимаемых свойствами 'left' и 'right', подставляется значение '0'.
  4. Если свойства 'left', 'right' или 'width' (по-прежнему) принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-left' и 'margin-right', подставляется значение '0'.
  5. Если на этом этапе свойства 'margin-left' и 'margin-right' все еще имеют значение 'auto', то осуществляется решение уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  6. Если на этом этапе в левой части уравнения осталось только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  7. Если на этом этапе значения остаются перегруженными, то значение, принимаемое свойством 'left' (в случае, когда свойство 'direction' принимает значение 'rtl') или свойством 'right' (в случае, когда свойство 'direction' принимает значение 'ltr'), игнорируется и относительно него решается уравнение.

10.3.8 Замещаемые абсолютно позиционируемые элементы

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

  1. Если свойство 'width' принимает значение 'auto', то вместо него подставляется внутреннее значение ширины элемента.
  2. Если свойства 'left' и 'direction' принимают значения 'auto' и 'ltr', соответственно, то вместо 'auto' подставляется значение расстояния от левого сегмента края контейнера до левого сегмента краевой линии поля гипотетического блока, который был бы первым блоком элемента, если бы его свойство 'position' принимало значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агенты пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает отрицательное значение.
  3. Если свойства 'right' и 'direction' принимают значения 'auto' и 'rtl', соответственно, то вместо 'auto' подставляется значение расстояния от правого сегмента края контейнера до правого сегмента краевой линии поля уже упоминавшегося гипотетического блока. Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает положительное значение.
  4. Если свойство 'width' принимает значение 'auto', то вместо всех значений 'auto', принимаемых свойствами 'left' и 'right', подставляется значение '0'.
  5. Если свойства 'left', 'right' или 'width' (все еще) принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-left' и 'margin-right', подставляется значение '0'.
  6. Если на этом этапе свойства 'margin-left' и 'margin-right' все еще имеют значение 'auto', то осуществляется решение уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  7. Если на этом этапе в левой части уравнения осталось только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  8. Если на этом этапе значения остаются перегруженными, то значение, принимаемое свойством 'left' (в случае, когда свойство 'direction' принимает значение 'rtl') или свойством 'right' (в случае, когда свойство 'direction' принимает значение 'ltr'), игнорируется и относительно него решается уравнение.

10.4 Минимальное и максимальное значения ширины: 'min-width' и 'max-width'

'min-width'
Значение:  <длина> | <проценты> | inherit
Начальное значение:  зависит от пользовательского агента
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование:  нет
Процентное задание:   относительно ширины контейнера
Устройства:  визуального форматирования
'max-width'
Значение:  <длина> | <проценты> | none | inherit
Начальное значение:  none
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование:  нет
Процентное задание:   относительно ширины контейнера
Устройства:  визуального форматирования

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

<длина>
Задает фиксированное минимальное и максимальное вычисляемое значение ширины.
<проценты>
Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока.
none
(Только для свойства 'max-width') На ширину блока не накладывается никаких ограничений.

В следующим алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'width':

  1. Значение ширины (кроме 'min-width' и 'max-width') вычисляется по правилам, описанным в разделе "Определение значений ширины и полей".
  2. Если вычисленное значение свойства 'min-width' превышает значение свойства 'max-width', то свойству 'max-width' присваивается значение свойства 'min-width'.
  3. Если вычисленное значение ширины превышает значение свойства 'max-width', то применяются писанные выше правила, но на этот раз в качестве зарезервированного значения для свойства 'width' выступает значение свойства 'max-width'.
  4. Если вычисленное значение ширины не превосходит значения свойства 'min-width', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения для свойства 'width' выступает значение свойства 'min-width'.

У агента пользователя существует возможность определения минимального неотрицательного значения для свойства 'min-width', зависящего от рассматриваемого элемента и других свойств. Если значение свойства 'min-width' опустится ниже установленного минимума вследствие явного задания значения или вычисления в рамках значения 'auto' с использованием вышеописанных правил, агент пользователя может использовать этот минимум в качестве вычисляемого значения.

10.5 Высота содержимого: свойство 'height'

'height'
Значение:  <длина> | <проценты> | auto | inherit
Начальное значение:  auto
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов
Наследование:  нет
Процентное задание:  см. текст
Устройства:  визуального форматирования

Это свойство задает высоту содержимого блоков, порождаемых элементами структурного уровня и замещаемыми элементами.

Данное свойство не применяется к незамещаемым элементам строкового уровня. Высота блока незамещаемого элемента строкового уровня определяется значением свойства 'line-height' (которое может быть наследуемым).

Значения данного свойства имеют следующий смысл:

<длина>
Определяет фиксированное значение высоты.
<проценты>
Определяет высоту в процентах. Процентное соотношение вычисляется относительно высоты контейнера генерируемого блока. Если высота контейнера не задана явно (т.е. она зависит от высоты содержимого), то это значение интерпретируется как 'auto'.
auto
Значение высоты зависит от значений других свойств. См. ниже.

Использование отрицательных значений для свойства 'height' не допускается.

Пример(ы):

Например, следующее правило устанавливает высоту абзаца равной 100 пикселам:

P { height: 100px }

Абзацы, которым в высоту необходимо больше 100 пикселов, при отображении будут выходить за допустимые пределы в соответствии со свойством 'overflow'.

10.6 Определение значений высоты и полей

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

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

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

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

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

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

Если свойство 'top', 'bottom', 'margin-top' или 'margin-bottom' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойство 'height' принимает значение 'auto', то его вычисляемое значение равно внутреннему значению высоты.

10.6.3 Незамещаемые элементы уровня блока в нормальном потоке и незамещаемые перемещаемые элементы

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

10.6.4 Незамещаемые абсолютно позиционируемые элементы

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

'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', игнорируется и относительно него решается уравнение.

10.6.5 Замещаемые абсолютно позиционируемые элементы

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

  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', игнорируется и относительно него решается уравнение.

10.7 Минимальное и максимальное значения высоты: 'min-height' и 'max-height'

Иногда оказывается полезным ограничивать диапазон значений высоты элементов. Эту возможность предоставляют следующие два свойства:

'min-height'
Значение:  <длина> | <проценты> | inherit
Начальное значение:  0
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование:  нет
Процентное задание:   относительно высоты контейнера
Устройства:  визуального форматирования
'max-height'
Значение:  <длина> | <проценты> | none | inherit
Начальное значение:  none
Область применения:  все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование:  нет
Процентное задание:   относительно высоты контейнера
Устройства:  визуального форматирования

Эти два свойства позволяют разработчикам ограничивать диапазон значений высоты блоков. Значения данных свойств имеют следующий смысл:

<длина>
Задает фиксированное минимальное и максимальное вычисляемое значение высоты.
<проценты>
Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно высоты контейнера генерируемого блока. Если высота контейнера не задана явно (т.е. она зависит от высоты содержимого), то значение процентного соотношения интерпретируется как 'auto'.
none
(Только для свойства 'max-height'.) На высоту блока не накладывается никаких ограничений.

В следующем алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'height':

  1. Значение высоты (кроме 'min-height' и 'max-height') вычисляется согласно правилам, описанным в разделе "Определение значений высоты и полей".
  2. Если вычисленное значение свойства 'min-height' превышает значение свойства 'max-height', то свойству 'max-height' присваивается значение свойства 'min-height'.
  3. Если вычисленное значение высоты превышает значение свойства 'max-height', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения свойства 'height' выступает значение свойства 'max-height'.
  4. Если вычисленное значение высоты не превосходит значения свойства 'min-height', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения свойства 'height' выступает значение свойства 'min-height'.

10.8 Определение высоты строки: свойства 'line-height' и 'vertical-align'

Как описано в разделе, посвященном контексту форматирования строк, агенты пользователей преобразуют строковые блоки в набор вертикально упорядоченных линейных блоков, высота которых определяется следующим образом:

  1. Вычисляется высота каждого строкового блока в линейном блоке (см. раздел "Определение значений высоты и полей" и описание свойства 'line-height').
  2. В соответствии со свойствами 'vertical-align' осуществляется вертикальное упорядочение строковых блоков.
  3. Высота линейного блока равна расстоянию от верхней границы самого верхнего блока до нижней границы самого нижнего блока.

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

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

10.8.1 Интерлиньяж и половинный интерлиньяж

Т.к. высота строкового блока может изменяться в зависимости от размера шрифта текста, содержащегося в этом блоке (например, 'line-height' > 1em), то сверху и снизу от отображаемых глифов возможно наличие свободного места. Разность между размером шрифта и вычисляемым значением свойства 'line-height' называется интерлиньяжем (или межстрочным интервалом). Половина интерлиньяжа называется половинным интерлиньяжем.

Агенты пользователей осуществляют вертикальное центрирование глифов в строковых блоках, добавляя сверху и снизу половинный интерлиньяж. Например, если высота части текста равна '12pt', а значение свойства 'line-height' равно '14pt', то необходимо добавить 2pt дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Эта процедура также применяется и к пустым блокам, если предположить, что пустой блок содержит бесконечно узкую букву.)

Если значение свойства 'line-height' меньше размера шрифта, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы выйдут за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут найти на границы смежного линейного блока.

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

'line-height'
Значение:  normal | <число> | <длина> | <проценты> | inherit
Начальное значение:  normal
Область применения:  все элементы
Наследование:  да
Процентное задание:   относительно размера шрифта элемента
Устройства:  визуального форматирования

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

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

Значения этого свойства имеют следующий смысл:

normal
Сообщает агентам пользователей о необходимости задать "адекватную" величину вычисляемого значения, исходя из размера шрифта элемента. Это значение означает то же, что и <число>. Для 'normal' рекомендуется задавать вычисляемое значение в диапазоне от 1.0 до 1.2.
<длина>
Определяет значение высоты блока. Отрицательные значения не допускаются.
<число>
Вычисляемым значением данного свойства является некоторое число, умноженное на значение размера шрифта данного элемента. Отрицательные значения не допускаются. Наследуется число, а не вычисляемое значение.
<проценты>
Вычисляемым значением данного свойства является соответствующее процентное значение, умноженное на вычисленное значение размера шрифта данного элемента. Отрицательные значения не допускаются.

Пример(ы):

В представленном ниже примере в результате выполнения любого из трех правил получается одно и то же значение высоты строки: DIV { line-height: 1.2; font-size: 10pt } /* число */ DIV { line-height: 1.2em; font-size: 10pt } /* длина */ DIV { line-height: 120%; font-size: 10pt } /* проценты */

Если элемент содержит текст, отображаемый с использованием нескольких типов шрифтов, то значение свойства 'line-height' агент пользователя должен определить, исходя из наибольшего значения размера шрифта.

Обычно если свойство 'line-height' принимает только одно значение для всех строковых блоков в абзаце (и в нем нет высоких графических объектов), то согласно вышесказанному базисные линии следующих друг за другом строк будут находиться друг от друга на расстоянии, в точности равном значению свойства 'line-height'. Это оказывается важным, когда необходимо осуществить выравнивание столбцов текста, отображаемого разными шрифтами, например, в таблице.

Обратите внимание, что свойства 'font-size' и 'line-height' замещаемых элементов всегда принимают некоторое значение, даже если они не используются непосредственно для определения высоты блока. Тем не менее, свойство 'font-size' используется для определения масштаба единиц измерения 'em' и 'ex', а свойство 'line-height' играет определенную роль для свойства 'vertical-align'.

'vertical-align'
Значение:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <проценты> | <длина> | наследуемое
Начальное значение:  baseline
Область применения:  строковые и 'table-cell' элементы
Наследование:  нет
Процентное задание:   относительно значения свойства 'line-height' самого элемента
Устройства:  визуального форматирования

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

Примечание. Значения данного свойства имеют несколько иной смысл применительно к таблицам. Дополнительную информацию можно найти в разделе об алгоритмах определения высоты таблицы.

baseline
Осуществляется выравнивание базисной линий блока относительно базисной линии его родительского блока. Если у блока нет базисной линии, то выполняется выравнивание его нижней границы относительно базисной линии родительского блока.
middle
Осуществляется выравнивание средней по вертикали точки блока относительно уровня базисной линии родительского блока в сумме с половиной x-высоты родительского блока.
sub
Осуществляется смещение базисной линии блока вниз до надлежащего уровня, отведенного для нижних индексов блока, порожденного родительским элементом. (Это значение не влияет на размер шрифта текста элемента.)
super
Осуществляется смещение базисной линии блока вверх до надлежащего уровня, отведенного для верхних индексов блока, порожденного родительским элементом. (Это значение не влияет на размер шрифта текста элемента.)
text-top
Осуществляется выравнивание верхней границы блока относительно верхней кромки шрифта родительского элемента.
text-bottom
Осуществляется выравнивание нижней границы блока относительно нижней кромки шрифта родительского элемента.
<проценты>
Осуществляется смещение блока на заданную величину (процент от значения свойства 'line-height') вверх (положительное значение) или вниз (отрицательное значение). Значение '0%' аналогично значению 'baseline'.
<длина>
Осуществляется смещение блока на заданную величину вверх (положительное значение) или вниз (отрицательное значение). Значение '0cm' аналогично значению 'baseline'.

Остальные значения определяются относительно линейного блока, в котором отображается генерируемый блок:

top
Осуществляется выравнивание верхней границы блока относительно верхней границы линейного блока.
bottom
Осуществляется выравнивание нижней границы блока относительно нижней границы линейного блока.