Блочная модель при создании сайта

Структура HTML кода веб-страницы допускает два вида элементов: блочные и строчные. Блочные, в отличие от строчных могут выступать в роли контейнеров и заключать в себе другие компоненты HTML разметки. Именно блочная модель элемента заключает в себе набор CSS свойств и правил, которыми обладают все блочные элементы HTML кода.

Содержимое блока представляет собой его основу. Физические размеры области, выделенной для содержимого (контента) блочного элемента, согласно спецификации W3C определяется CSS свойствами width (ширина) и height (высота). Промежутки между контентом и внутренними краями границ блочного элемента задаются соответствующими свойствами padding –left, — top, -right и –bottom и называются полями. Обрамляются поля выше упомянутыми границами (бордюрами), для управлениями которыми предусмотрено CSS свойство border, которое, как и свойство padding может быть конкретизировано для каждой из четырех границ блока (-left, -top, -right, -bottom). В семейство свойства border входят дополнительные свойства, позволяющие гибко управлять видом бордюров блочного элемента. И самым крайним, внешним компонентом блочной модели являются отступы, занимающие пространство между внешней частью границ блока и соседними элементами страницы дизайн сайта. Величина отступов задается с помощью свойства margin и тоже может отдельно применяться к каждой из сторон блочного элемента.

Все вышеупомянутые CSS свойства, входящие в блочную модель элемента не являются обязательными, что дает веб-разработчикам широкий выбор вариантов отображения элементов структуры веб-страницы.Box model (блочная модель) является стандартом, которого придерживаются все браузеры при отображении контейнеров, хотя некоторые из свойств блочной модели можно применять и к строчным элементам. К примеру, CSS свойства margin-left и –right можно применить к элементу , но это же свойство смежных сторон (margin-top и –bottom) для этого элемента работать не будут.

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