Поиск

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

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

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

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

Краевая линия информативной области окружает отображаемое содержимое элемента, порождающего блок.

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

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

Краевая линия границы

Краевая линия границы окружает границу блока. Если ширина границы равна нулю, то ее край совпадает с краем отступов.

Краевая линия поля или внешняя краевая линия

Краевая линия поля окружает поле блока. Если ширина поля равна нулю, то ее край совпадает с краем границы.

Любая краевая линия может быть разбита на четыре сегмента: левый, правый, верхний и нижний.

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

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

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

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