Евгений Резниченко - Спецификация CSS2

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

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

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

'min-height'

Значение: <length> | <percentage> | inherit

Начальное: 0

Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

'max-height'

Значение: <length> | <percentage> | none | inherit

Начальное: none

Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

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

<length>

Специфицирует фиксированный минимум и максимум вычисленной высоты.

<percentage>

Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'.

none

(Только для 'max-height') Высота бокса не ограничена.

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

1Высота вычисляется (без 'min-height' и 'max-height') по вышеприведённым правилам в "Вычислении высоты и полей".

2Если вычисленное значение 'min-height' больше значения 'max-height', 'max-height' устанавливается в значение 'min-height'.

3Если вычисленная высота больше, чем 'max-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'max-height' как специфицированного значения для 'height'.

4Если вычисленная высота меньше, чем 'min-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'min-height' как специфицированного значения для 'height'.

Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:

1Вычисляется высота каждого инлайн-бокса в строчном боксе (см. "Вычисление высоты и полей" и свойство 'line-height').

2Инлайн-боксы выравниваются по вертикали в соответствии с их свойствами 'vertical-align'.

3Высота строчного бокса - это расстояние между верхом самого верхнего бокса и низом самого нижнего бокса.

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

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

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

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

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

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

'line-height'

Значение: normal | <number> | <length> | <percentage> | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: относительно размера шрифта самого элемента

Носитель: визуальный

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

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

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

normal

Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и <number>. Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2.

<length>

Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы.

<number>

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

<percentage>

Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.

Эти три правила дают в результате одно значение высоты строки:

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 | <percentage> | <length> | inherit

Начальное: baseline

Применяется: к инлайн-элементам и элементам 'table-cell'

Наследуется: нет

Процентное: относительно 'line-height' самого элемента

Носитель: визуальный

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

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

baseline

Выравнивает базовую линию бокса с базовой линией бокса-родителя. Если бокс не имеет базовой линии, выравнивается низ бокса с базовой линией родителя.

middle

Выравнивает вертикальную среднюю точку бокса с базовой линией бокса-родителя плюс половина x-высоты родителя.

sub

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

super

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

text-top

Выравнивает верх бокса с верхом шрифта родительского элемента.

text-bottom