8.1. Размеры блока.

Каждый блок имеет место для содержания (например, для текста, изображения и т.д.) и необязательное окружение из отступов (padding), границ (border) и полей (margin); размеры каждой области определяется свойствами, описанными ниже. Следующая диаграмма показывает, как эти области связаны, и какая терминология используется для ссылок на участки полей, границ и отступов:

[D]

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

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

поле содержания или внутреннее поле

Поле содержания окружает визуализированное содержание элемента.

поле отступа

Поле отступа окружает блока содержания. Если отступ имеет ширину 0, то поле отступа совпадает с полем содержания. Поле отступа блока окружает поле содержания этого блока.

поле границы

Поле границы включает границу блока. Если граница имеет ширину 0, то поле границы совпадает с полем отступа.

область самого поля или внешнее поле

Это поле окружает весь блок. Если поле имеет ширину 0, то это поле совпадает с полем границы.

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

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

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

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

• Область содержания (Content): свойство 'background' генерирующего элемента.
• Область отступа (Padding): свойство 'background' генерирующего элемента.
• Область границы (Border): свойства границы (border) генерирующего элемента.
• Область поля (Margin): поля всегда прозрачные.