Содержание
Позиция и размер блока(ов) элемента иногда вычисляются относительно определенного прямоугольника, называемого контейнер элемента. Контейнер определяется следующим образом:
Примечание: Это может привести к тому, что ширина контейнера станет отрицательной.
Если нет таких предков, то контейнер является начальным контейнером.
В устройствах с постраничной разбивкой, абсолютно позиционированные элементы размещаются относительно их контейнеров, игнорируя любые разрывы страниц (как если бы документ был без разбивки на страницы). Элемент может впоследствии быть разбит на несколько страниц.
Для абсолютно позиционированного содержимого, которое решено поместить на странице, отличной от выводимой страницы (текущей страницы), или решено поместить на текущей странице, которая уже была представлена для печати, принтеры могут поместить содержимое
Примите во внимание, что элемент уровня блока, который разбит на несколько страниц, может иметь различную ширину на каждой странице и что могут быть зависящие от устройств ограничения.
Без позиционирования, контейнера в следующем документе:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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>
назначаются следующим образом:
| Для блока, порожденного элементом | Контейнер назначается элементом |
|---|---|
| html | начальный контейнер (назначается агентом пользователя) |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
Если осуществить позиционирование элемента "div1":
#div1 { position: absolute; left: 50px; top: 50px }
то после этого роль его контейнера будет выполнять не "body"; он становится начальным контейнером (т.к. при этом не найдется ни одного позиционированного блока, порожденного его предком).
Если осуществить позиционирование элемента "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").
| Значение: | <длина> | <проценты> | auto | inherit |
| Начальное значение: | auto |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное или 'auto', как определено или абсолютная длина; 'auto', если свойство не применяется |
Это свойство задает ширину содержимого блоков, порожденных элементами уровня блока и замещаемыми элементами.
Данное свойство не применяется к незамещаемым элементам строкового уровня. Ширина содержимого блоков незамещаемых элементов строкового уровня, равна ширине отображаемого внутри них содержимого (до момента любого относительного смещения дочерних элементов). Говорят, что строковые блоки перемещаются в линейные блоки. Ширина линейных блоков задается их контейнером, но может быть укорочена имеющимися перемещаемыми объектами.
Ширина блока замещаемого элемента является его внутренним параметром и может масштабироваться агентом пользователя, если значение этого свойства отлично от 'auto'.
Значения имеют следующий смысл:
Отрицательные значения свойства 'width' недопустимы.
Например, согласно следующему правилу ширина содержимого абзацев устанавливается равной 100 пикселам:
p { width: 100px }
Значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' элементов как используемые для размещения, зависят от типа генерируемого блока и друг от друга. (Значение, используемое для размещения, иногда называют используемым значением.) В принципе, используемые значения равны вычисляемым значениям, со значением 'auto' заменяется некоторым более подходящим значением, а процентное значение вычисляется основываясь на контейнере, но есть исключения. При этом необходимо различать следующие ситуации:
Для позиций 1-6 и 9-10, значение 'left' и 'right', используемое для размещения, определяется правилами, изложенными в разделе 9.4.3.
Свойство 'width' не применяется. Вычисляемое значения 'auto' для свойств 'left', 'right', 'margin-left' или 'margin-right' становится используемым значением '0'.
Вычисляемое значения 'auto' для свойств 'margin-left' или 'margin-right' становится используемым значением '0'.
Если и 'height' и 'width' имеют вычисленное значение 'auto' и элемент также имеет внутреннюю ширину, то эта внутренняя ширина является используемым значением свойства 'width'.
Если и 'height' и 'width' имеют вычисленное значение 'auto', а элемент не имеет внутреннюю ширину, но имеет внутреннюю высоту или внутреннее соотношение; или если 'width' имеет вычисленное значение 'auto', 'height' имеет некоторое другое вычисленное значение, а элемент имеет внутреннее соотношение; тогда используемое значение свойства 'width' равно:
(используемая высота) * (внутреннее соотношение)
В противном случае, если 'width' имеет вычисленное значение 'auto', но ни одно из условий, изложенных выше не имеет место, тогда используемое значение свойства 'width' равно 300px. Если значение 300px слишком большое для ширины устройства, агентам пользователей вместо этого следует использовать ширину наибольшего прямоугольника, который имеет соотношение 2:1 и соответствует ширине устройства.
Процентные внутренние ширины вначале оцениваются относительно ширины контейнера, если эта ширина сама не зависит от ширины замещаемого элемента. Если это имеет место, то процентные внутренние ширины такого элемента не могут быть разрешены и считается, что элемент не имеет внутренней ширины.
Следующие ограничения должно сжать используемые значения других свойств:
'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' + ширина полосы прокрутки (если присутствует) (плюс любые 'margin-left' или 'margin-right', значения которых отличны от 'auto') больше ширины контейнера, тогда любые значения 'auto' свойств 'margin-left' или 'margin-right' для следующих правил рассматриваются как нулевые.
Если все из вышеперечисленных свойств имеют вычисленное значение, отличное от 'auto', то говорят, что значения "перегружены", и одно из используемых значение будет не совпадать с его вычисленным значением. Если свойство 'direction' контейнера принимает значение 'ltr', то заданное значение свойства 'margin-right' игнорируется, а значение вычисляется, исходя из справедливости вышеописанного равенства. Если свойство 'direction' принимает значение 'rtl', то аналогичные действия вместо этого осуществляются со свойством 'margin-left'.
Если из всех вышеназванных свойств только одно принимает значение 'auto', то его используемое значение определяется путем решения данного равенства.
Если свойство 'width' принимает значение 'auto', то значения 'auto' всех других свойств устанавливаются равными '0', а значение свойства 'width' вычисляется из получившегося в результате этого равенства.
Если и свойство 'margin-left' и свойство 'margin-right' принимают значение 'auto', то их используемые значения совпадают. Это приводить к горизонтальному центрированию элемента относительно краев контейнера.
Значение "ширина полосы прокрутки" применимо только если агент пользователя использует полосы прокрутки как свой механизм прокрутки. См. описание свойства 'overflow'.
Используемое значение свойства 'width' определяется также, как и для замещаемых строковых элементов. Затем применяются правила для замещаемых элементов уровня блока для определения полей.
Если значение свойства 'margin-left' или 'margin-right' вычисляются как 'auto', то их используемое становится равным '0'.
Если значение свойства 'width' вычисляется как 'auto', то используемое значение равно ширине "уменьшить-для-заполнения".
Вычисление ширины "уменьшить-для-заполнения" подобно вычислению ширины ячейки таблицы с использованием алгоритма автоматического размещения таблицы. Примерно: вычисляется необходимая ширина путем форматирования содержимого без разрыва строк кроме случаев, когда разрывы строк указаны явно, а затем вычисляется необходимая минимальная ширина, например, пробуя применить все возможные разрывы строк. CSS 2.1 не определяет точный алгоритм. Проще говоря, находится доступная ширина: в данном случае, это ширина контейнера минус используемое значение свойств 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', и ширина любых соответствующих полос прокрутки.
Затем ширина "уменьшить-для-заполнения" определяется в соответствии с условием: min(max(необходимая минимальная ширина, доступная ширина), необходимая ширина).
Если значение свойства 'margin-left' или 'margin-right' вычисляются как 'auto', то их используемое становится равным '0'. Используемое значение свойства 'width' определяется также, как и для замещаемых строковых элементов.
В контексте данного раздела и последующих, термин "статическое положение" (элемента) означает, проще говоря, то какое положение элемент имел бы в нормальном потоке. Вернее:
Вместо того чтобы в действительности вычислять размеры этого гипотетического блока, агенты пользователей свободно могут осуществлять приблизительную оценку его возможного положения.)
В контексте вычисления статического положения, контейнер фиксировано позиционированного элемента является начальным контейнером вместо области просмотра, и следует предполагать, что все прокручиваемые блоки прокручены к из первоначальному положению.
Ограничение, которое определяет используемые значения этих элементов состоит в следующем:
'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', решается уравнение при дополнительном условии, что эти два поля имеют равные значения, если они при этом не примут отрицательные значения, в этом случае когда значение свойство 'direction' контейнера равно 'ltr' ('rtl'), значения свойств 'margin-left' ('margin-right') устанавливаются равными нулю и решается уравнение относительно 'margin-right' ('margin-left'). Если одно из свойств 'margin-left' или 'margin-right' имеет значение 'auto', то решается уравнение для этого значения. Если значения являются перегруженными, то игнорируются значения для 'left' (в случае, если свойство 'direction' контейнера имеет значение 'rtl') или 'right' (в случае, если свойство 'direction' имеет значение 'ltr') и решается для этого значения.
В противном случае, значения 'auto' свойств 'margin-left' и 'margin-right' устанавливаются равными 0, и выбирается одно из следующих шести правил, которое и применяется.
Вычисление ширины "уменьшить-для-заполнения" подобно вычислению ширины ячейки таблицы с использованием алгоритма автоматического размещения таблицы. Примерно: вычисляется необходимая ширина путем форматирования содержимого без разрыва строк кроме случаев, когда разрывы строк указаны явно, а затем вычисляется необходимая минимальная ширина, например, пробуя применить все возможные разрывы строк. CSS 2.1 не определяет точный алгоритм. Проще говоря, находится доступная ширина: она находится путем решения уравнения для 'width' после установки значения 'left' (в случае 1) или 'right' (в случае 3) равным 0.
Затем ширина "уменьшить-для-заполнения" определяется как: min(max(необходимая минимальная ширина, доступная ширина), необходимая ширина).
Значение "ширина полосы прокрутки" применимо только если агент пользователя использует полосы прокрутки как свой механизм прокрутки. См. описание свойства 'overflow'.
В этом случае ситуация аналогична предыдущей за исключением того, что теперь элемент имеет внутреннее значение ширины. При этом последовательность подстановок имеет следующий вид:
Если значение свойства 'width' – 'auto', то используемое значение равно ширине уменьшить-для-заполнения как для перемещаемого элемента.
Вычисляемое значение 'auto' для свойств 'margin-left' или 'margin-right' становится используемым значением '0'.
Аналогично замещаемым строковым элементам.
| Значение: | <длина> | <проценты> | inherit |
| Начальное значение: | 0 |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина |
| Значение: | <длина> | <проценты> | none | inherit |
| Начальное значение: | none |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк |
| Наследование: | нет |
| Процентное задание значений: | относительно ширины контейнера |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина или 'none' |
Эти два свойства позволяют разработчикам ограничивать диапазон значений ширины содержимого. Значения имеют следующий смысл:
Отрицательные значения свойства 'min-width' и 'max-width' недопустимы.
В следующим алгоритме описано, как эти два свойства влияют на используемое значение свойства 'width':
Эти шаги не отражаются на действительных вычисляемых значениях вышеуказанных свойств.
Однако, для замещаемых элементов с внутренним соотношением и значениями свойств 'width' и 'height', установленными в 'auto', алгоритм вычислений следующий:
Выбираются из таблицы решенные значения ширины и высоты для соответствующих ограничений. Берется max-width и max-height как max(min, max) так, чтобы соблюдалось неравенство min ? max. В данной таблице w и h проставлены для результатов вычислений ширины и высоты с игнорированием свойств 'min-width', 'min-height', 'max-width' и 'max-height'. Обычно это внутренняя ширина и высота, но их может не быть для замещаемых элементов с внутренними соотношениями.
В случаях, когда ширина или высота задана явно, а остальные размеры установлены в 'auto', применение минимального или максимального ограничения к сторонам со значением 'auto' может вызвать конфликт между соблюдением явно заданного размера и соблюдением (неявного) соотношения сторон. Мнения в Рабочей группе по поводу решения данной проблемы расходятся: результату следует быть насколько возможно ближе (но не обязательно) к сохранению соотношения сторон, всегда соблюдая явно заданные ширину и высоту, или результату следует быть насколько возможно ближе (но не обязательно) к соблюдению явно заданного размера, всегда соблюдая соотношение сторон?
Это пример сценария такого случая: Рисунку с соотношением сторон 1:1 даны следующие объявления стиля;
width: 200px; min-height: 300px;
Если соблюдать первенство ширины над соотношением сторон, то изображение растянется до 200px в ширину и 300px в высоту. Если соблюдать первенство соотношения сторон над шириной, то изображение растянется до 300px в ширину и 300px в высоту.
Данный проект определяет первое поведение. Ни одному из этих способов еще не отдано предпочтений, и будут рассматриваться отклики от сообщества авторов по этой проблеме.
| Ограничение | Решенная ширина | Решенная высота |
|---|---|---|
| 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' вычислено как это значение.
| Значение: | <длина> | <проценты> | auto | inherit |
| Начальное значение: | auto |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов |
| Наследование: | нет |
| Процентное задание значений: | см. нижеследующий текст |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное или 'auto' (см. описание значения <percentage>) или абсолютная длина; 'auto', если свойство не применяется |
Это свойство задает высоту содержимого блоков, порождаемых элементами уровня блока, строковыми блоками и замещаемыми элементами.
Данное свойство не применяется к незамещаемым элементам строкового уровня. Используемые вместо этого правила см. в разделе о вычислении высоты и полей для незамещаемых строковых элементов.
Значения имеют следующий смысл:
Примите во внимание, что высота контейнера абсолютно позиционированного элемента зависит от размера самого элемента, и таким образом процентное соотношение высоты в таком элементе всегда может быть решено. Однако, может получиться так, что высота не будет известна до тех пор, пока не будут обработаны элементы, следующие в документе далее.
Использование отрицательных значений для свойства 'height' не допускается.
Например, следующее правило устанавливает высоту содержимого абзаца равной 100 пикселам:
p { height: 100px }
Абзацы, содержимым которых в высоту необходимо больше 100 пикселов, при отображении будут выходить за допустимые пределы в соответствии со свойством 'overflow'.
В зависимости от типа блока должны быть введено различие в вычислении значения свойств 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' для:
Для пунктов 1-6 и 9-10, используемые значения 'top' и 'bottom', определяется правилами, изложенными в разделе 9.4.3.
Примечание: эти правила применяются к корневым элементам так же, как и к остальным элементам.
Свойство 'height' не применяется. Высоту области содержимого следует основывать на шрифте, но данная спецификация не определяет то, как это делается. Агенты пользователя могут, например, использовать em-блок или максимально выступающий надстрочный и подстрочный элементы шрифта. (Последнее гарантировало бы, что глифы, выступающие выше или ниже em-блока будут находиться в пределах области содержимого, но приведет к созданию блоков с различными размерами для различных шрифтов; первое гарантировало бы, что авторы могут управлять стилями фона относительно свойства 'line-height', но приведет к тому, что глифы будут прорисовываться за пределами их области содержимого.)
Примечание: уровень 3 CSS будет вероятно включать свойство для выбора того, какой из размеров в шрифте будет использоваться для высоты содержимого.
Вертикальный отступ, граница и поле незамещаемых строковых блоков начинаются от верха и низа области содержимого, но не 'line-height'. Но только 'line-height' используется при вычислении высоты линейного блока.
В данной спецификации не определяется вычисление высоты области содержимого если используется более одного шрифта (это может произойти когда глифы находятся в различных шрифтах). Однако, предполагается, что высота выбрана такой, что область содержимого достаточно высока или для (1) em-блоков, или для (2) максимально выступающих надстрочных и подстрочных символов всех шрифтов в элементе. Примите во внимание, что в зависимости от выравнивания шрифта по базовой линии, она может быть большим чем любой из содержащихся размеров шрифта.
Если 'margin-top', или 'margin-bottom' имеют значение 'auto', их используемое значение равно 0.
Если и 'height' и 'width' имеют вычисленное значение 'auto' и элемент также имеет внутреннюю высоту, то эта внутренняя высота является используемым значением свойства 'height'.
Если и 'height' и 'width' имеют вычисленное значение 'auto', а элемент не имеет внутреннюю высоту, но имеет внутреннюю ширину или внутреннее соотношение; или если 'height' имеет вычисленное значение 'auto', 'width' имеет некоторое другое вычисленное значение, а элемент имеет внутреннее соотношение; тогда используемое значение свойства 'height' равно:
(используемая ширина) / (внутреннее соотношение)
В противном случае, если 'height' имеет вычисленное значение 'auto', но ни одно из вышеизложенных условий не соблюдено, то используемое значение свойства 'height' должно быть установлено равным высоте наибольшего прямоугольника с соотношением сторон 2:1, имеющего высоту, не превышающую 150px, и ширину, не превышающую ширину устройства.
Если эта высота задана явно, или если замещаемый элемент абсолютно позиционирован, то заданные в процентах внутренние высоты оцениваются относительно высоты контейнера. Если не имеет место ни одно из этих ограничений, то значения, заданные в процентах, для таких элементов не могут быть решены и такие элементы считается как не имеющие внутренней высоты.
Для элементов 'inline' и 'inline-block', блок поля используется при вычислении высоты линейного блока.
Данный раздел также применим к незамещаемые элементы уровня блока в нормальном потоке, когда их свойство 'overflow' не вычислено как 'visible', но было распространено на область просмотра.
Если 'margin-top', или 'margin-bottom' имеют значение 'auto', их используемое значение равно 0. Если свойство 'height' имеет значение 'auto', то высота зависит от того, имеет ли элемент какие-либо дочерние элементы уровня блока и имеет ли он отступ или границы:
Если у него имеются только дочерние элементы строкового уровня, то высота равна расстоянию от верха самого верхнего линейного блока до низа самого нижнего линейного блока.
Если он имеет дочерние элементы уровня блока, то высота равна расстоянию от края верхней границы блока, сгенерированного самым верхним дочерним элементом уровня блока, который не имеет полей, перекрывающихся с ним, до края нижней границы блока, сгенерированного самым нижним дочерним элементом уровня блока, который не имеет полей, перекрывающихся с ним. Однако, если элемент имеет ненулевой верхний отступ и/или верхнюю границу, или является корневым элементом, то содержимое начинается от края верхнего поля самого верхнего дочернего элемента. (Первый случай выражает тот факт, что верхние и нижние поля элемента перекрываются с полями самого верхнего и самого нижнего дочерних элементов, в то время как во втором случае присутствие отступа/границы предотвращает верхние поля от перекрытия.) Аналогично, если элемент имеет ненулевой нижний отступ и/или нижнюю границу, тогда содержимое заканчивается на краю нижнего поля самого нижнего дочернего элемента.
При этом учитываются только дочерние элементы, принадлежащие нормальному потоку (т.е. перемещаемые и абсолютно позиционируемые блоки игнорируются, а относительно позиционируемые блоки рассматриваются без их смещений). Примите во внимание, что дочерние блоки могут быть безымянными структурными блоками.
В контексте данного раздела и последующих, термин "статическое положение" (элемента) означает, проще говоря, то какое положение элемент имел бы в нормальном потоке. Вернее, статическое положение для значения 'top' равно расстоянию от верхнего края контейнера до края верхнего поля гипотетического блока, который являлся бы первым блоком элемента, если бы его свойство 'position' имело значение 'static', а свойство 'float' – 'none'. Если гипотетический блок находится над контейнером, то упомянутое расстояние принимает отрицательное значение.
Вместо того чтобы в действительности вычислять размеры этого гипотетического блока, агенты пользователей свободно могут осуществлять приблизительную оценку его возможного положения.
В контексте вычисления статического положения, контейнер фиксировано позиционированного элемента является начальным контейнером вместо области просмотра.
Для абсолютно позиционируемых элементов используемые значения вертикальных размеров должны удовлетворять следующему ограничению:
'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', игнорируется и решается уравнение относительно этого значения.
В противном случае, выбирается одно из следующих шести правил, которое и применяется.
Значение "ширина полосы прокрутки" применимо только если агент пользователя использует полосы прокрутки как свой механизм прокрутки. См. описание свойства 'overflow'.
В этом случае ситуация аналогична предыдущей, за исключением того, что теперь элемент имеет внутреннее значение высоты. При этом последовательность подстановок имеет следующий вид:
Данный раздел применяется к:
Если 'margin-top', или 'margin-bottom' имеют значение 'auto', их используемое значение равно 0. Если свойство 'height' имеет значение 'auto', то высота зависит от потомков элемента.
Для элементов 'inline-block', блок поля используется при вычислении высоты линейного блока.
В некоторых случаях (см. предыдущий раздел), высота элемента вычисляется следующим образом:
Если у него имеются только дочерние элементы строкового уровня, то высота равна расстоянию от верха самого верхнего линейного блока до низа самого нижнего линейного блока.
Если у него имеются дочерние элементы уровня блока, то высота равна расстоянию от края верхней границы самого верхнего блока дочернего элемента уровня блока до края нижней границы самого нижнего блока дочернего элемента уровня блока.
Абсолютно позиционированные дочерние элементы игнорируются, а относительно позиционированные блоки рассматриваются без их смещений. Примите во внимание, что дочерние блоки могут быть безымянными структурными блоками.
Дополнительно, если у элемента имеются любые перемещаемые потомки, край нижнего поля которых находится ниже низа, то высота увеличивается для того, чтобы вместить эти края. Принимаются во внимание только перемещаемые объекты, которые являются дочерними для самого элемента или для потомков в нормальном потоке, т.е. перемещаемые объекты внутри абсолютно позиционированных потомков или другие перемещаемые объекты во внимание не принимаются.
Иногда оказывается полезным ограничивать диапазон значений высоты элементов. Эту возможность предоставляют следующие два свойства:
| Значение: | <длина> | <проценты> | inherit |
| Начальное значение: | 0 |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов |
| Наследование: | нет |
| Процентное задание значений: | см. описание |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина |
| Значение: | <длина> | <проценты> | none | inherit |
| Начальное значение: | none |
| Область применения: | все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов |
| Наследование: | нет |
| Процентное задание значений: | см. описание |
| Устройства: | визуальные |
| Вычисляемое значение: | процентное соотношение как определено, или абсолютная длина или 'none' |
Эти два свойства позволяют разработчикам ограничивать диапазон значений высоты блоков. Значения имеют следующий смысл:
Отрицательные значения свойств 'min-height' и 'max-height' недопустимы.
В следующим алгоритме описано, как эти два свойства влияют на используемое значение свойства 'height':
Эти шаги не отражаются на действительных вычисляемых значениях вышеуказанных свойств.
Однако, для замещаемых элементов, значения свойств и 'width' и 'height' которых вычислено как 'auto', используется алгоритм, изложенный выше в разделе Минимальное и максимальное значения ширины, для того, чтобы найти используемые значения ширины и высоты. Затем применяются правила, изложенные выше в разделе "Определение значений высоты и полей", используя получившиеся в результате значения ширины и высоты так, как будто они являются вычисляемыми значениями.
Как описано в разделе, посвященном контексту форматирования строк, агенты пользователей преобразуют строковые блоки в набор вертикально упорядоченных линейных блоков. Высота линейных блоков определяется следующим образом:
Пустые элементы строкового уровня генерируют пустые строковые блоки, которые, тем не менее, по-прежнему имеют поля, границы, отступы и высоту строк, а поэтому оказывают влияние на вышеописанные вычисления ничуть не меньше, чем блоки, обладающие содержимым.
Так как значение свойства 'line-height' может отличаться от высоты области содержимого, то может иметь место пустое пространство выше и ниже представленного глифа. Разность между высотой содержимого и вычисляемым значением свойства 'line-height' называется межстрочным интервалом. Половина межстрочного интервала называется полуинтервалом.
Агенты пользователей осуществляют вертикальное центрирование глифов в строковых блоках, добавляя сверху и снизу полуинтервал. Например, если высота части текста равна '12pt', а значение свойства 'line-height' равно '14pt', то следует добавить 2pt дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Эта процедура также применяется и к пустым блокам, если предположить, что пустой блок содержит бесконечно узкую букву.)
Если значение свойства 'line-height' меньше высоты содержимого, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы "расплывутся" за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут также "наплывать" на границы смежного линейного блока.
Несмотря на то, что поля, границы и отступы незамещаемых элементов не учитываются при вычислении высоты линейного блока, он все равно отображаются вокруг строкового блока. Это означает, что если высота, определенная свойством 'line-height', меньше высоты содержимого контейнеров, то фон и цвет отступов и границ могут "наплывать" на смежные линейные блоки. Агентам пользователей следует представлять блоки в порядке их следования в документе. В этом случае границы следующих строк будут прорисовываться после границ и текста предыдущих строк.
| Значение: | normal | <число> | <длина> | <проценты> | inherit |
| Начальное значение: | normal |
| Область применения: | все элементы |
| Наследование: | да |
| Процентное задание значений: | относительно размера шрифта элемента |
| Устройства: | визуальные |
| Вычисляемое значение: | для <длины> и <процентов> – абсолютное значение; в остальных случаях – как определено |
Для элементов уровня блока, ячеек таблицы, заголовка таблицы или строковых блоков, содержимое которого состоит из элементов строкового уровня, 'line-height' определяет минимальную высоту линейных блоков в элементе. Минимальная высота состоит из минимальной высоты выше базовой линии блока и минимальной глубины ниже ее, как будто каждый линейный блок начинается со строкового блока нулевой ширины со свойствами шрифта и высоты строки, которые имеет блок (чей TEX называется "подпорка").
В элементе строкового уровня, 'line-height' определяет высоту, которая используется при вычислении высоты линейного блока (за исключением замещаемых элементов, для которых высота блока задается свойством 'height').
Значения данного свойства имеют следующий смысл:
В представленном ниже примере в результате выполнения любого из трех правил получается одно и то же значение высоты строки:
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'. Это оказывается важным, когда необходимо осуществить выравнивание столбцов текста, отображаемого разными шрифтами, например, в таблице.
| Значение: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <проценты> | <длина> | inherit |
| Начальное значение: | baseline |
| Область применения: | строковые и элементы 'table-cell' |
| Наследование: | нет |
| Процентное задание значений: | относительно значения свойства 'line-height' самого элемента |
| Устройства: | визуальные |
| Вычисляемое значение: | для <длины> и <процентов> – абсолютное значение; в остальных случаях – как определено |
Данное свойство влияет на то, как блокам, порожденным строковыми элементами, будет назначаться позиция в вертикальной плоскости внутри линейного блока.
Примечание. Значения данного свойства имеют несколько иной смысл применительно к таблицам. Дополнительную информацию можно найти в разделе об алгоритмах определения высоты таблицы.
Следующие значения имеют значение только при рассмотрении относительно родительского элемента строкового уровня, или относительно подпорки родительского элемента уровня блока, ячейки таблицы, заголовка таблицы или строкового уровня.
Следующие значения выравнивают элемент относительно линейного блока. Так как элемент может иметь дочерние элементы, выровненные относительно него (которые в свою очередь могут иметь потомков, выровненных относительно них), эти значения используют ограничения поддерева выравнивания. Поддерево выравнивания строкового элемента содержит этот элемент и поддерево выравнивания всех дочерних строковых элементов, вычисленное значение свойства 'vertical-align' которых не равно 'top' или 'bottom'. Верх дерева выравнивания выше верха блоков в поддереве, а низ – аналогично.
Базовая линия элемента 'inline-table' является базовой линией первой строки таблицы.
Базовая линия элемента 'inline-block' является базовой линией его последнего линейного блока в нормальном потоке, если он не имеет также и in-flow линейные блоки или если его свойство 'overflow' имеет вычисленное значение, отличное от 'visible', то тогда в этом случае базовая линия является краем нижнего поля.