Спецификация CSS2

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

Каждый бокс имеет область содержимого(например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:

Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).

Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:

content edge/край содержимого или inner edge/внутренний край

Край содержимого окружает отображаемое содержимое.

padding edge/край заполнения

Окружает заполнение бокса . Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.

border edge/край рамки

Окружает рамку бокса . Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.

margin edge/край поля или outer edge/внешний край

Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.

Каждый край может быть разорван слева, справа, вверху и внизу.

Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.

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

Стиль фона различных областей бокса определяется так:

[x]. Область содержимого: свойство 'background' генерирующего элемента.

[x]. Область заполнения: свойство 'background' генерирующего элемента.

[x]. Область рамки: свойства рамки генерирующего элемента.

[x]. Область поля: поля всегда прозрачны.

Этот пример документа HTML показывает, как поля, рамки и заполнение взаимодействуют:

  
    
    
  
  
    

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

и даёт дерево документа с (помимо других соотношений) элементом UL, в котором есть два дочерних LI.

Первая диаграмма иллюстрирует, что этот пример даст в результате. Вторая иллюстрирует взаимоотношения между полями, рамками и заполнением элементов UL и LI.

Обратите внимание, что:

[x]. Ширина содержимого каждого бокса LI вычисляется сверху вниз; содержащий блок для каждого бокса LI устанавливается элементом UL.

[x]. Высота каждого бокса LI задаётся высотой содержимого плюс верхнее и нижнее заполнение, рамки и поля. Обратите внимание, что горизонтальные поля между боксами LI сжаты.

[x]. Правое заполнение боксов LI было установлено шириной 0 (свойство 'padding'). Результат виден на второй иллюстрации.

[x]. Поля боксов LI прозрачны - поля всегда прозрачны - так что цвет фона (зелёный) заполнения и области содержимого UL просвечивает сквозь него.

[x]. Второй элемент LI специфицирует пунктирную рамку (свойство 'border-style').

Свойства поля специфицируют область полей бокса. Сокращённое свойство 'margin' устанавливает поле для всех четырёх сторон, в то время как другие свойства устанавливают только соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в:

Специфицирует фиксированную ширину.

Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.

auto

См. расчёт ширины и полей.

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

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Значение: | inherit

Начальное: 0

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

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

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

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

Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.

H1 { margin-top: 2em }

'margin'

Значение: {1,4} | inherit

Начальное: не определено для сокращённого свойства

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

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

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

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

'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.

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

BODY { margin: 2em }         /* все поля установлены в 2em */
BODY { margin: 1em 2em }     /* верхнее и нижнее = 1em, правое и левое = 2em */
BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило эквивалентно следующему:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;          /* копируется из противоположной стороны (из правой) */

Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в:

Специфицирует фиксированную ширину.

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

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Значение: | inherit

Начальное: 0

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

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

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

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

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.

BLOCKQUOTE { padding-top: 0.3em }

'padding'

Значение: {1,4} | inherit

Начальное: не определено для сокращённого свойства

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

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

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

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

Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.

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

Цвет поверхности области заполнения специфицируется через свойство 'background':

H1 { 
  background: white; 
  padding: 1em 2em;
}

Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.

Примечание. Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

P { 
  color: black; 
  background: white; 
  border: solid;
}

#xy34 { border-style: solid dotted }

H1 { border-bottom: thick solid red }

H1 { border-bottom: thick solid }

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}