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

Опубликовано: 23 августа 2014      Перевод:

Перевод параграфа 10 CSS2.1 спецификации: Visual formatting model details.

10.1 Определение «содержащего блока».

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

  1. Содержащим блоком, в котором находится корневой элемент является прямоугольная область, называемая исходным содержащим блоком. Для устройств с непрерывной средой отображения информации его размеры совпадают с величиной вьюпорта и он жестко привязан к начальной точке канвы, а для устройств с постраничным отображением информации он представлен областью страницы. Значение свойства direction исходного содержащего блока совпадает со значением этого свойства, установленным для корневого элемента.
  2. Что касается других элементов, то в том случае, если способ позиционирования элемента определяется значением relative или static, то его содержащий блок формируется краями области контента бокса его ближайшего предка, который является блоком контейнером.
  3. Если для элемента установлено свойство position: fixed, то его содержащим блоком является вьюпорт при отображении на устройствах с непрерывной средой или область страницы в случае его отображения на устройствах с постраничным выводом информации.
  4. Если для элемента установлено свойство position: absolute, то его содержащий блок представлен ближайшим предком, свойство position которого принимает значение absolute, relative или fixed, с учетом следующих обстоятельств:
    1. В том случае если предком является элемент строчного уровня, то содержащий блок определяется областью, образуемой внешними гранями внутренних отступов первого и последнего внутристрочного бокса, генерируемых родительским строчным элементом. Но, если родительский строчный элемент занимает несколько строк, то согласно CSS2.1 спецификации содержащий блок его дочернего элемента не определен.
    2. В противном случае, содержащий блок формируется гранями отступов бокса предка.
  5. Если у элемента нет предка, то его содержащим блоком является исходный содержащий блок.

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

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

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

Без позиционирования содержащие блоки (С.Б.) элементов следующего документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph…</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>

определяются таким образом:

Для бокса, созданного элементом содержащим блоком является
html Исходный С.Б. (зависит от пользовательского агента)
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2

Если мы позиционируем элемент div1:

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

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

В том случае, если мы позиционируем и элемент em1:

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

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

Для бокса, созданного элементом содержащим блоком является
html Исходный С.Б. (зависит от пользовательского агента)
body html
div1 Исходный С.Б.
p1 div1
p2 div1
em1 div1
strong1 em1

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

10.2 Ширина контента: свойство width.

'width'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: все элементы за исключением не замещаемых строчных элементов, табличных строк и групп табличных строк.
Возможность наследования: нет
Процентные значения: относительно ширины содержащего блока
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или auto, либо абсолютное расстояние

Данное свойство определяет контентную ширину боксов.

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

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

<расстояние>
Устанавливает ширину области контента с помощью единиц расстояния.
<процентное отношение>
Устанавливает процентное отношение ширины. Процентное отношение рассчитывается относительно ширины содержащего блока бокса, генерируемого для данного элемента. Если ширина содержащего блока зависит от ширины форматируемого элемента, то в этом случае спецификация CSS 2.1 не дает каких-либо рекомендаций по результирующей компоновке.

Для абсолютно позиционированных элементов, содержащий блок которых базируется на блочном элементе контейнере, процентное отношение рассчитывается относительно ширины области внутренних отступов бокса этого элемента. Здесь имеет место изменение CSS 1 стандарта, в котором процентное отношение ширины всегда рассчитывалось относительно области контента бокса родительского элемента.
auto
В этом случае ширина зависит от значений других свойств. Смотри следующие разделы.

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

В этом примере показано правило, с помощью которого устанавливается фиксированная ширина контента элементов параграфов в 100 пикселей:

p { width: 100px }

10.3 Вычисление ширины и полей.

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

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

Для пунктов 1-6 и 9-10 значения применяемых к относительно позиционированным элементам свойств left и right определяются согласно правилам из параграфа 9.4.3.

Рассчитываемое ниже применяемое значение ширины width является предварительным значением и в зависимости от свойств min-width и max-width может перерасчитываться несколько раз. Смотри представленный далее раздел Минимальное и максимальное значение ширины.

10.3.1 Строчные, не замещаемые элементы.

Свойство width не применяется. В случае, если вычисленным значением свойства margin-left или margin-right является auto, то его применяемое значение равно нулю.

10.3.2 Строчные, замещаемые элементы.

Вычисленному значению auto свойств margin-left или margin-right соответствует нулевое применяемое значение.

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

В случае, если оба свойства height и width имеют вычисленное значение равное auto, а у элемента нет собственной ширины, но есть собственные значения высоты и соотношения размерностей или же если вычисленным значением для свойства width является auto, а для свойства height какое-нибудь другое значение и внутренняя величина соотношений размерностей элемента известна, тогда применяемое значение свойства width определяется следующим образом:

(фактическая высота)*(внутреннее значение соотношения размерностей)

Если для обоих свойств height и width вычисленным значением является auto и у элемента присутствует внутреннее значение соотношений размерностей, но нет внутренней высоты и ширины, тогда спецификация CSS 2.1 не дает четкого способа определения применяемого значения свойства width. Однако, если ширина содержащего блока не зависит от ширины замещаемого элемента, тогда для расчета применяемого значения свойства width рекомендуется использовать ограничительное уравнение, которое применяется для не замещаемых поточных элементов блочного уровня.

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

В противном случае, если при вычисленном значении auto свойства width элемент не удовлетворяет никакому из перечисленных выше условий, то применяемое значение свойства width устанавливается в 300px. Если величина 300px слишком велика для определенного устройства, вместо нее ПА должны использовать значение ширины, определяемое самым большим прямоугольником с соотношением сторон 2:1, который может быть отображен устройством.

10.3.3 Не замещаемые, поточные элементы блочного уровня.

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

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' +
'margin-right' = ширина содержащего блока

В том случае, если значение свойства width отлично от auto и сумма значений 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (плюс любое другое, кроме auto значение 'margin-left' или 'margin-rignt') больше чем ширина содержащего блока, тогда значение auto любого из свойств margin-left или margin-right, используемое следующими правилами, трактуется как ноль.

Если вычисляемые значения всех упоминаемых выше свойств отличны от auto, то имеет место так называемое «сверхограничение» значений, а это приводит к тому, что одно из применяемых значений будет отлично от соответствующего вычисленного значения. В этом случае, если значением свойства direction содержащего блока является ltr, то определяемое значение свойства margin-right игнорируется, а его новое значение рассчитывается путем решения приведенного выше уравнения. Если же свойство direction принимает значение rtl, производятся те же действия, но в этот раз применительно к свойству margin-left.

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

Если для свойства width установлено значение auto, то любое другое значение auto приравнивается к нулю, а значение свойства width получается путем решения уравнения.

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

10.3.4 Замещаемые, поточные элементы блочного уровня.

Применяемое значение свойства width определяется также как и для строчных, замещаемых элементов. А для определения размеров полей применяются те же правила, что и в случае с не замещаемыми, поточными элементами.

10.3.5 Плавающие, не замещаемые элементы.

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

Если вычисляемое значение widthauto, то применяемое значение определяется shrink-to-fit шириной.

Расчет значения shrink-to-fit ширины подобен расчету ширины ячейки таблицы, применяемый алгоритмом автоматической разбивки таблицы. Это делается приблизительно так: сначала рассчитываются предпочтительная ширина путем форматирования контента элемента без переносов строк, за исключением тех мест, где такие переносы заданы явно, а также предпочтительная минимальная ширина, когда, к примеру, разрывы строк применяются в каждом допустимом месте, минимизируя таким образом занимаемое контентом горизонтальное пространство. Точный алгоритм спецификацией CSS 2.1 не определен. В-третьих, находится доступная ширина: в нашем случае это ширина содержащего блока минус применяемые значения свойств margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right и ширины любой из соответствующих полос прокрутки.

Тогда shrink-to-fit значение ширины определяется следующим образом:
min(max(предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).

10.3.6 Плавающие, замещаемые элементы.

Если вычисленным значением свойств margin-left и margin-right является auto, то их применяемые значения равны нулю. Применяемое значение свойства width определяется также как и для строчных, замещаемых элементов.

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

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

  • Содержащий блок статической позиции — это содержащий блок гипотетического бокса, который являлся бы первым, генерируемым для элемента боксом, если бы для его свойства position было определено значение static, а для свойства float — значение none. (Имейте в виду, что в соответствии с правилами из раздела 9.7 для описываемого здесь гипотетического расчета может также понадобиться иное вычисленное значение свойства display).
  • Соответствующее статической позиции значение свойства left равно расстоянию от левой грани содержащего блока до края левого поля гипотетического бокса, который являлся бы первым боксом элемента, если бы его свойство position имело значение static, а свойство floatnone. Это значение отрицательно, если гипотетический бокс находится слева от содержащего блока.
  • Соответствующее статической позиции значение свойства right равно расстоянию от правой грани содержащего блока до края правого поля упоминаемого выше гипотетического бокса. Это значение положительно, если гипотетический бокс находится слева от соответствующей грани содержащего блока.

Однако, вместо реального расчета геометрии такого гипотетического бокса, пользовательским агентам разрешено использовать его предполагаемую позицию.

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

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

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' +
'margin-right' + 'right' = ширина содержащего блока

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

В том случае, когда ни одно из этих трех свойств не принимает значение auto, тогда:
Если значением обеих свойств margin-left и margin-right является auto, то для указанного выше уравнения определяется дополнительное условие равенства значений этих двух полей, и оно решается до тех пор, пока это значение не будет отрицательным. После чего, если направленность распространения текста содержащего блока установлена в ltr (rtl), свойство margin-left (margin-right) устанавливается в ноль, а значение для свойства margin-right (margin-left) вычисляется из уравнения. Если значение auto установлено только для одного из свойств margin-left или margin-right, его значение находится путем решения уравнения. Если имеет место «сверхограничение» значений уравнения, то игнорируется значение свойства left (если значение direction содержащего блока установлено в rtl) или свойства right (когда direction установлено в ltr) и значение для этого свойства находится из уравнения.

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

  1. left и widthauto, а right — не auto, тогда width устанавливается shrink-to-fit, а left находится из уравнения.
  2. left и rightauto, а width — не auto, тогда если значение свойства direction элемента, образующего содержащий блок статической позицииltr, для свойства left устанавливается соответствующее статической позиции значение, в противном случае свойство right принимает значение, определяемое статической позицией элемента. Далее из уравнения находится значение для left (если directionrtl) или right (если directionltr).
  3. width и rightauto, а left — не auto, тогда width устанавливается shrink-to-fit, а right находится из уравнения.
  4. leftauto, а width и right — не auto, тогда left находится из уравнения.
  5. widthauto, а left и right — не auto, тогда width находится из уравнения.
  6. rightauto, а left и width — не auto, тогда right находится из уравнения.

Расчет shrink-to-fit значения ширины производится аналогично расчету ширины ячейки таблицы, выполняемому алгоритмом автоматической разбивки таблицы. В общих чертах это делается следующим образом: сначала путем исключения из контента элемента всех естественных разрывов строк, за исключением мест, где они явно обозначены с помощью соответствующих символов, вычисляется предпочтительная ширина; далее вычисляется предпочтительная минимальная ширина, занимаемая контентом элемента когда переносы строк применяются в каждом допустимом месте, что приводит к максимальному сужению области контента элемента. Спецификация CSS 2.1 не определяет точный алгоритм такого расчета. И в-третьих, находится доступная ширина путем нахождения width из уравнения после установки значения left (в случае, определяемом пунктом 1) или right (в случае 3) равным нулю.

Тогда shrink-to-fit значение ширины определяется следующим образом:
min(max(предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).

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

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

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

10.3.9 Не замещаемые, поточные внутристрочные блоки.

Когда значением свойства width является auto, применяемое значение устанавливается равным shrink-to-fit ширине так, как это определено для плавающих элементов.

Вычисленное значение auto для свойства margin-left или margin-right становится нулевым применяемым значением.

10.3.10 Замещаемые, поточные внутристрочные блоки.

Все в точности так, как и для строчных, замещаемых элементов.

10.4 Минимальная и максимальная ширина: min-width и max-width.

'min-width'
Допустимые значения: <расстояние> | <процентное отношение> | inherit
Исходное значение: 0
Применяется к: все элементы за исключением не замещаемых строчных элементов, табличных строк и групп табличных строк.
Возможность наследования: нет
Процентные значения: относительно ширины содержащего блока
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или абсолютное расстояние
'max-width'
Допустимые значения: <расстояние> | <процентное отношение> | none | inherit
Исходное значение: none
Применяется к: все элементы за исключением не замещаемых строчных элементов, табличных строк и групп табличных строк.
Возможность наследования: нет
Процентные значения: относительно ширины содержащего блока
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или абсолютное расстояние, либо none

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

<расстояние>
Устанавливает фиксированное применяемое значение минимальной или максимальной ширины.
<процентное отношение>
Устанавливает процентное отношение, используемое при вычислении применяемого значения. Процентная величина рассчитывается относительно ширины содержащего блока бокса, образованного для данного элемента. Если ширина содержащего блока отрицательна, то применяемое значение устанавливается в нулевую величину. Если ширина содержащего блока зависит от ширины самого элемента, тогда CSS 2.1 спецификация не дает точного определения, как установка данного значения влияет на компоновку.
none
(Только для max-width) Ограничения на ширину бокса не устанавливаются.

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

Результат применения свойств min-width и max-width к таблицам, внутристрочным таблицам, табличным ячейкам, табличным строкам и группам табличных строк спецификацией CSS 2.1 не определен.

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

  1. Предварительная величина применяемого значения ширины определяется (без учета min-width и max-width) с помощью указанных выше правил «Вычисления ширины и полей».
  2. Если полученная предварительная величина применяемого значения больше чем значение max-width, то упомянутые правила применяются снова, но на этот раз для вычисленного значения свойства width берется величина вычисленного значения свойства max-width.
  3. Если в результате получена ширина меньше, чем значение свойства min-width, то те же правила применяются еще раз, однако, теперь в качестве вычисленного значения свойства width берется величина min-width.
Используемые в алгоритме действия не оказывают никакого влияния на реальные вычисляемые значения описываемых здесь свойств.

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

Из представленной ниже таблицы выбираются разрешённые значения ширины и высоты, соответствующие определенному нарушению ограничения. При этом максимальные значения max-width и max-height выбираются согласно правилу max(min, max), то есть с соблюдением неравенства min ≤ max. В этой таблице под w и h понимаются значения, полученные в результате вычисления ширины и высоты без учета значений свойств min-width, min-height, max-width и max-height. Это, как правило, внутренние значения ширины и высоты, однако, они могут отсутствовать у замещаемых элементов, для которых определена внутренняя величина соотношения размерностей.

В случаях, когда величина ширины или высоты задана явно, а другая размерность определена как auto, то применение к ней ограничения максимального или минимального значения может привести к ситуации сверхограничения. Хотя спецификацией четко определены действия в данной ситуации, результат их выполнения может не оправдать ожидания авторов. Для получения других вариантов можно использовать определяемое в CSS3 свойство object-fit.
Нарушение ограничения Разрешённая ширина Разрешённая высота
none w h
w > max-width max-width max(max-width * h/w, min-height)
w < min-width min-width min(min-width * h/w, max-height)
h > max-height max(max-height * w/h, min-width) max-height
h < min-height min(min-height * w/h, max-width) min-height
(w > max-width) и (h > max-height), где (max-width/w ≤ max-height/h) max-width max(min-height, max-width * h/w)
(w > max-width) и (h > max-height), где (max-width/w > max-height/h) max(min-width, max-height * w/h) max-height
(w < min-width) и (h < min-height), где (min-width/w ≤ min-height/h) min(max-width, min-height * w/h) min-height
(w < min-width) и (h < min-height), где (min-width/w > min-height/h) min-width min(max-height, min-width * h/w)
(w < min-width) и (h > max-height) min-width max-height
(w > max-width) и (h < min-height) max-width min-height

Далее применяются правила из параграфа «Вычисление ширины и полей», с использованием полученного значения в качестве вычисленного значения свойства width.

10.5 Высота контента: свойство height.

'height'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: все элементы за исключением не замещаемых строчных элементов, столбцов таблиц и групп табличных столбцов.
Возможность наследования: нет
Процентные значения: смотри пояснения ниже
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или auto (смотри пояснения после описания значения <процентное отношение>), либо абсолютное расстояние

Данное свойство определяет контентную высоту боксов.

Это свойство не применяется к не замещаемым элементам строчного уровня. Правила, используемые взамен, описаны в параграфе «Расчет высоты и полей для не замещаемых строчных элементов».

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

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

Для абсолютно позиционированных элементов, содержащий блок которых базируется на блочном элементе контейнере, процентное отношение рассчитывается относительно высоты области внутренних отступов бокса этого элемента. Здесь имеет место изменение CSS 1 стандарта, в котором процентное отношение высоты всегда рассчитывалось относительно области контента бокса родительского элемента.
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. абсолютно позиционированные, замещаемые элементы;
  9. не замещаемые, поточные внутристрочные блоки;
  10. замещаемые, поточные внутристрочные блоки.

Для пунктов 1-6 и 9-10 применяемые значения свойств top и bottom определяются согласно правилам из параграфа 9.4.3.

Эти правила применяются к корневому элементу так же, как и к любому другому элементу.
Рассчитываемое ниже применяемое значение высоты height является предварительным значением и в зависимости от свойств min-height и max-height может перерасчитываться несколько раз. Смотри представленный далее раздел Минимальное и максимальное значение высоты.

10.6.1 Строчные, не замещаемые элементы.

Свойство height не применяется. Высота области контента должна определяться исходя из размера шрифта, однако, данная спецификация не дает четких рекомендаций как именно. Пользовательский агент для этого может использовать em-бокс или величину, определяемую максимальным верхним и нижним выносными элементами литер шрифта. (В последнем случае гарантируется, что глифы, которые могут выступать за верхнюю или нижнюю грани em-бокса, также будут находиться в области контента элемента, но такой подход приводит к образованию боксов различного размера в зависимости от типа используемого шрифта. Что касается первого метода, то он позволяет авторам при оформлении фона элемента полагаться на значение line-height, но приводит к отрисовке глифов за пределами его области контента.)

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

Вертикальные внутренние отступы, границы и поля внутристрочного, не замещаемого бокса начинаются от верхней и нижней грани области контента и никаким образом не влияют на значение свойства line-height. А при расчете высоты строчного бокса учитывается только значение свойства line-height.

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

10.6.2 Строчные, замещаемые элементы; замещаемые, поточные элементы блочного уровня; замещаемые, поточные внутристрочные блоки; и плавающие, замещаемые элементы.

Если margin-top или margin-bottom определены как auto, то их применяемое значение равно нулю.

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

Иначе, если вычисленное значение для height равно auto и у элемента имеется внутренняя величина соотношений размерностей, то применяемое значение свойства height находится так:

(применяемая ширина)/(внутренняя величина соотношения размерностей)

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

В противном случае, когда вычисленным значением свойства height является auto, но ни одно из вышеупомянутых условий не имеет место, тогда применяемое значение height должно быть установлено равным высоте самой большой прямоугольной области с пропорцией сторон 2:1, высота которой не превышает 150 пикселей, а ширина не больше обусловленной возможностями устройства ширины.

10.6.3 Не замещаемые, поточные элементы блочного уровня у которых вычисленное значение для 'overflow' равно 'visible'.

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

Если значением margin-top или margin-bottom является auto, то их применяемое значение равно нулю. Если heightauto, высота элемента зависит от того, имеет ли он дочерние элементы блочного уровня и есть ли у него отступы или границы:

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

  1. нижней грани последнего строчного бокса, если бокс элемента образует контекст строчного форматирования с одной или более строкой;
  2. нижней грани нижнего (возможно объединенного) поля его последнего поточного дочернего бокса, если нижнее поле дочернего бокса не объединяется c нижним полем самого элемента;
  3. грани нижней границы последнего поточного дочернего бокса, верхнее поле которого не объединяется с нижним полем самого элемента.
  4. В противном случае высота элемента равна нулю.

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

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

Используемый в рамках этого и следующего параграфа термин «статическая позиция» (элемента) в общих чертах означает, позицию элемента, которую он занимал бы, находясь в нормальном потоке документа. А точнее, соответствующее статической позиции значение свойства top определяется расстоянием от верхней грани содержащего блока до грани верхнего поля гипотетического бокса, который являлся бы первым, изначально генерируемым для элемента боксом, если бы для его свойства position было определено значение static, для свойства float — значение none, а определенным значением свойства clear было бы none. (Имейте в виду, что в соответствии с правилами из раздела 9.7 для описываемого здесь гипотетического расчета может также понадобиться иное вычисленное значение свойства display.) Это значение будет отрицательным в том случае, если рассматриваемый здесь гипотетический бокс будет находиться выше содержащего блока.

Однако, вместо реального расчета геометрии такого гипотетического бокса, пользовательским агентам разрешено использовать его предполагаемую позицию.

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

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

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

Если все три свойства top, height и bottom принимают значение auto, тогда свойству top присваивается соответствующее статической позиции значение и применяется представленное ниже третье правило.

В случае, когда ни одно из этих трех свойств не принимает значение auto, тогда: Если значением обеих свойств margin-top и margin-bottom является auto, то указанное выше уравнение решается с дополнительным условием равенства этих двух полей. Если только одно из этих свойств margin-top или margin-bottom имеет значение auto, то его значение находится путем решения уравнения. Если имеет место «сверхограничение» значений уравнения, то игнорируется значение свойства bottom, которое потом находится из уравнения.

В противном случае применяется одно подходящее из перечисленных ниже правил.

  1. top и heightauto, а bottom — не auto, тогда высота зависит от контента согласно параграфу 10.6.7, значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а top находится из уравнения.
  2. top и bottomauto, а height — не auto, тогда для свойства top устанавливается соответствующее статической позиции значение, значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а bottom находится из уравнения.
  3. height и bottomauto, а top — не auto, тогда высота зависит от контента согласно параграфу 10.6.7, значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а bottom находится из уравнения.
  4. topauto, а height и bottom — не auto, тогда значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а top находится из уравнения.
  5. heightauto, а top и bottom — не auto, тогда значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а height находится из уравнения.
  6. bottomauto, а top и height — не auto, тогда значения auto свойств margin-top и margin-bottom устанавливаются в ноль, а bottom находится из уравнения.

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

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

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

10.6.6 Сложные случаи.

Этот параграф применяется к:

  • Не замещаемые, находящиеся в нормальном потоке элементы блочного уровня при вычисленном значении свойства overflow отличном от visible (за исключением случаев, когда их переполняющий контент распространяется на область вьюпорта).
  • Не замещаемые элементы, образующие внутристрочные блоки.
  • Плавающие, не замещаемые элементы.

Если значения margin-top или margin-bottom равны auto, то их применяемое значение равно нулю. Если heightauto, то высота элемента зависит от его потомков, согласно параграфу 10.6.7.

При расчете высоты строчного бокса принимается во внимание область, образуемая полями боксов внутристрочных блоков.

10.6.7 Высота со значением 'auto' корневых, образующих блочный контекст форматирования элементов.

В некоторых случаях (смотри параграфы 10.6.4 и 10.6.6) высота элемента, который образует блочный контекст форматирования, вычисляется следующим образом:

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

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

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

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

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

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

'min-height'
Допустимые значения: <расстояние> | <процентное отношение> | inherit
Исходное значение: 0
Применяется к: все элементы за исключением не замещаемых строчных элементов, табличных столбцов и групп табличных столбцов.
Возможность наследования: нет
Процентные значения: смотри пояснения ниже
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или абсолютное расстояние
'max-height'
Допустимые значения: <расстояние> | <процентное отношение> | none | inherit
Исходное значение: none
Применяется к: все элементы за исключением не замещаемых строчных элементов, табличных столбцов и групп табличных столбцов.
Возможность наследования: нет
Процентные значения: смотри пояснения ниже
Типы устройств: визуальные
Вычисляемое значение: полученное при определении процентное отношение или абсолютное расстояние или none

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

<расстояние>
Устанавливает фиксированное минимальное или максимальное вычисляемое значение высоты.
<процентное отношение>
Устанавливает процентную величину, используемую для определения применяемого значения. Процентное отношение рассчитывается относительно высоты содержащего блока бокса, генерируемого для данного элемента. Если высота содержащего блока не задана явно (то есть зависит от высоты контента) и форматируемый элемент не является абсолютно позиционированным, то данное процентное значение трактуется как 0 (для min-height) или none (для max-height).
none
(Только для max-height) Отсутствуют какие-либо ограничения на высоту бокса.

Отрицательные значения для свойств min-height и max-height не допустимы.

Результат применения свойств min-height и max-height к таблицам, внутристрочным таблицам, табличным ячейкам, табличным строкам и группам табличных строк спецификацией CSS 2.1 не определен.

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

  1. Предварительная величина применяемого значения высоты рассчитывается (без учета min-height и max-height) с помощью правил, указанных в параграфе «Вычисления высоты и полей».
  2. Если полученная предварительная величина больше чем значение max-height, то упомянутые правила применяются снова, но на этот раз для вычисленного значения свойства height берется значение свойства max-height.
  3. Если в результате получена высота меньше, чем значение свойства min-height, то те же правила применяются еще раз, однако, теперь в качестве вычисленного значения свойства height берется значение min-height.
Предусмотренные данным алгоритмом действия не оказывают никакого влияния на реальные вычисляемые значения задействованных в нем свойств. Изменение применяемого значения свойства height не влияет на процесс объединения полей, за исключением случаев, указанных в специальных требованиях, оговариваемых в параграфе «8.3.1 Объединение полей», касающихся свойств min-height или max-height.

Однако, для замещаемых элементов, вычисленное значение свойств width и height которых равно auto, с целью расчета применяемого значения их высоты и ширины используется описанный выше в рамках параграфа «Минимальное и максимальное значение ширины» алгоритм. Далее применяются правила из приведенного выше параграфа «Вычисление высоты и полей», но в качестве вычисленных значений этих свойств берутся полученные в результате первого шага значения ширины и высоты.

10.8 Расчет высоты строки: свойства line-height и vertical-align.

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

  1. Рассчитывается высота каждого, находящегося в строчном боксе бокса строчного уровня. Применительно к замещаемым элементам, внутристрочным блокам и внутристрочным таблицам ею является высота области полей бокса этих элементов. Высота внутристрочных боксов равна значению их свойства line-height. (Смотри «Вычисление высоты и полей» и определение высоты внутристрочного бокса из параграфа «Интерлиньяж и половинный интерлиньяж».)
  2. Боксы строчного уровня выравниваются по вертикали в соответствии со значением их свойства vertical-align. В случае, если они выравниваются по верху (top) или по низу (bottom), они должны быть выровнены таким образом, чтобы минимизировать высоту строчного бокса. Если подобные боксы достаточно высоки, то существует несколько способов их размещения и в этом случае позиция базовой линии строчного бокса (т.е. позиция распорки см. ниже) спецификацией CSS 2.1 не определена.
  3. Высота строчного бокса равна расстоянию между верхним краем самого верхнего бокса и нижним краем самого нижнего бокса. (Это же касается и распорки, что поясняется в приведенном ниже описании свойства line-height)

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

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

Стандарт CSS полагает, что каждый шрифт имеет собственные исходные параметры, определяющие характерную для него высоту и глубину, занимаемые им выше и ниже базовой линии соответственно. В этом параграфе для обозначения высоты используется буква А (заданного шрифта определенного размера), а глубина обозначается буквой D. Для расстояния от самой верхней точки шрифта до самой нижней мы также используем комбинацию AD, т.е. AD = A + D. (Смотри приведенное ниже пояснение касательно того, как определить A и D для TrueType и OpenType типов шрифтов.) Имейте в виду, что эти исходные параметры определяют размер шрифта в целом и не требуют согласования с верхним или нижним выносным элементом любого отдельно взятого глифа.

Находящиеся в не замещаемом внутристрочном боксе глифы должны быть выровнены пользовательским агентом относительно друг друга по соответствующим им базовым линиям. Затем для каждого глифа определяются A и D. Имейте в виду, что находящиеся в одном внутристрочном боксе глифы могут принадлежать различным шрифтам и поэтому совсем не обязательно иметь одинаковые значения А и D. Если внутристрочный бокс не содержит ни одного глифа вообще, то считается, что в нем находится распорка (невидимый глиф нулевой ширины), значения А и D которой равны соответствующим значениям первого доступного для элемента шрифта.

Кроме того, для каждого глифа определяется значение добавляемого интерлиньяжа L, где L = line-height — AD. Половина значения интерлиньяжа добавляется над высотой А, а его вторая половина под глубиной D, обеспечивая глиф с соответствующим ему интерлиньяжем общей высотой над базовой линией, равной A' = A + L/2 и общей глубиной, равной D' = D + L/2.

L может быть отрицательным.

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

Поля, границы и внутренние отступы незамещаемых элементов также не учитываются при расчете строчного бокса, они как и прежде отображаются вокруг внутристрочных боксов. Это значит, что если высота содержащих боксов, устанавливаемая свойством line-height, меньше чем высота их содержимого, то фон и цвета внутренних отступов и границ таких боксов могут «просачиваться» внутрь прилегающих строчных боксов. В процессе визуализации боксов пользовательские агенты должны придерживаться предусмотренной документом последовательности. Это приведет к тому, что границы предыдущих строк должны будут прорисовываться поверх границ и текста предыдущих строк.

Спецификацией CSS 2.1 неопределено, где именно находится область контента внутристрочного бокса (смотри параграф 10.6.1 выше) и поэтому различные ПА могут отрисовывать фон и границы по-разному, в различных местах.
Реализациям, использующим OpenType или TrueType шрифты, рекомендуется применять в качестве значений A и D метрики "sTypoAscender" и "sTypoDescender" из таблицы шрифтов OS/2 (после масштабирования с целью приведения к размеру шрифта текущего элемента). В случае отсутствия данных метрик, должны использоваться метрики "Ascent" и "Descent" из таблицы HHEA.
'line-height'
Допустимые значения: normal | <число> | <расстояние> | <процентное отношение> | inherit
Исходное значение: normal
Применяется к: все элементы
Возможность наследования: да
Процентные значения: относятся к размеру шрифта самого элемента
Типы устройств: визуальные
Вычисляемое значение: для <расстояния> и <процентного отношения> — абсолютное значение; в противном случае — полученное при определении

Для элементов блочных контейнеров, контент которых состоит из элементов строчного уровня, свойство line-height определяет минимальную высоту находящихся в пределах этого элемента боксов. Эта минимальная высота включает минимальную высоту над базовой линией и минимальную глубину под ней, таким образом, если бы в начало каждого строчного бокса был помещен внутристрочный бокс нулевой ширины с установленными для него свойствами шрифта и высоты строки. Мы называем этот воображаемый бокс «распоркой» (Данный термин позаимствован из TeX).

Здесь имеется в виду, что указанная ранее высота и глубина шрифта над и под базовой линией являются метриками, определяемыми параметрами определенного шрифта. (Для более детальной информации смотри CSS Уровень 3).

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

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

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

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

div { line-height: 1.2; font-size: 10pt } /* число */
div { line-height: 1.2em; font-size: 10pt } /* расстояние */
div { line-height: 120%; font-size: 10pt } /* процентное отношение */

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

Когда для всех содержащихся в блочном боксе контейнере внутристрочных боксов существует только одно значение свойства line-height и во всех этих боксах используется один шрифт (и они не являются замещаемыми элементами, внутристрочными блоками и т.п.), приведенное выше утверждение гарантирует, что базовые линии следующих друг за другом строк находятся на расстоянии, в точности равном значению свойства line-height. Это особенно важно в тех ситуациях, когда необходимо выравнивать столбцы текста с различным шрифтом, к примеру, в таблице.
'vertical-align'
Допустимые значения: baseline |sub |super |top |text-top |middle |bottom |text-bottom | <процентное отношение> | <расстояние> | inherit
Исходное значение: baseline
Применяется к: элементы строчного уровня и ячейки таблиц
Возможность наследования: нет
Процентные значения: относятся к значению свойства line-height самого элемента
Типы устройств: визуальные
Вычисляемое значение: для <расстояния> и <процентного отношения> — абсолютное значение; в противном случае — полученное при определении

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

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

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

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

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

Представленные ниже правила позволяют выравнивать элемент по отношению к строчному боксу. Поскольку форматируемый элемент может иметь выравниваемые относительно него дочерние элементы (которые в свою очередь тоже могут иметь потомки, выравниваемые относительно них), данные значения применяются относительно граней выравниваемого поддерева. Выравниваемое поддерево внутристрочного элемента содержит сам элемент и выравниваемые поддеревья всех его дочерних внутристрочных элементов, вычисляемыми значениями свойства vertical-align которых не являются top или bottom. Верхней гранью выравниваемого поддерева считается грань самого верхнего бокса из всех боксов поддерева. Аналогичным образом определяется нижняя грань.

top
Выравнивает верхнюю грань поддерева с верхним краем строчного бокса.
bottom
Выравнивает нижнюю грань поддерева с нижним краем строчного бокса.

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

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