beget banner 468x60beget banner 728x90beget banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

Руководство по блочной модели в CSS

Каждый элемент, который может отображаться на веб-странице, состоит из одного или нескольких прямоугольных блоков. Блочная модель 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) — это область, где появляется только его содержимое, например текст, изображение, видео и т. д. Она также может содержать элементы-потомки.

flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее