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

Они могут иметь разные свойства и могут взаимодействовать друг с другом по-разному, но каждый блок имеет область содержимого (content area) и необязательные окружающие области отступов (padding), границы (border) и поля (margin).

На следующем изображении показано, как CSS-свойства width, height, padding, border и margin определяют, сколько места может занимать элемент на веб-странице.

Свойство padding — это внутреннее прозрачное пространство между содержимым элемента и его границей (border) (или краем блока, если у него нет границы border), тогда как поле margin — это внешнее прозрачное пространство, внешний отступ вокруг элемента.

Кроме того, если элемент имеет background-color, он будет виден через область padding. Область margin всегда остается прозрачной, на нее не влияет цвет фона элемента, однако через нее будет видно цвет фона родительского элемента.

Ширина и высота элементов

Обычно, когда вы устанавливаете ширину и высоту элемента, используя CSS-свойства width и height, в действительности вы устанавливаете только ширину и высоту области содержимого этого элемента. Фактическая ширина и высота блока элемента зависит от нескольких факторов.

Фактическое пространство, которое блок элемента может занять на веб-странице, рассчитывается следующим образом:

Box Size CSS-свойства
Total Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Подробнее о каждом из этих CSS-свойств вы узнаете в следующих главах руководства.

Теперь давайте посмотрим следующий пример, чтобы понять, как на самом деле работает блочная модель:

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* set padding for all four sides */
    border: 10px solid black; /* set border for all four sides */
    margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}

В блочной модели CSS область содержимого поля элемента (content area) — это область, где появляется только его содержимое, например текст, изображение, видео и т. д. Она также может содержать элементы-потомки.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.