Black Baron

При работе с CSS важно понимать, как браузер рассчитывает размеры и расположение элементов на странице. Даже если задать ширину или высоту элемента, итоговый размер может оказаться больше ожидаемого. Это происходит из-за особенностей так называемой блочной модели. В данной статье рассмотрим, что такое блочная модель CSS, из каких частей она состоит и как влияет на отображение элементов.

Что такое блочная модель (Box Model)

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

Блочная модель включает:

• содержимое (content);
• внутренние отступы (padding);
• границы (border);
• внешние отступы (margin).

Схематически это можно представить так:

margin

 └─ border

     └─ padding

         └─ content

Content (содержимое)

Это внутренняя часть элемента, где находится текст или другие элементы.

.box {

    width: 200px;

    height: 100px;

}

Здесь задаётся только размер содержимого, без учёта отступов и границ.

Padding (внутренние отступы)

Padding — это пространство между содержимым и границей элемента.

.box {

    padding: 20px;

}

Это увеличивает общий размер элемента, так как отступ добавляется к ширине и высоте.

Border (граница)

Граница обрамляет элемент и также влияет на его итоговый размер.

.box {

    border: 2px solid #333;

}

Margin (внешние отступы)

Margin задаёт расстояние между элементами.

.box {

    margin: 15px;

}

Важно: margin не входит в размер самого элемента, но влияет на расстояние между блоками.

Как рассчитывается размер элемента

По умолчанию итоговый размер элемента рассчитывается так:

общая ширина = width + padding + border

Пример:

.box {

    width: 200px;

    padding: 20px;

    border: 2px solid black;

}

Фактическая ширина будет:

200 + 40 (padding) + 4 (border) = 244px

Свойство box-sizing

Чтобы упростить расчёты, используется свойство box-sizing.

Значение content-box (по умолчанию)

Размер включает только содержимое:

.box {

    box-sizing: content-box;

}

Значение border-box

Padding и border включаются в заданную ширину:

.box {

    box-sizing: border-box;

}

Теперь:

.box {

    width: 200px;

    padding: 20px;

    border: 2px solid black;

    box-sizing: border-box;

}

Итоговая ширина остаётся 200px, а не увеличивается.

Практический пример

<div class="box">Пример блока</div>

.box {

    width: 250px;

    padding: 15px;

    border: 3px solid #666;

    margin: 10px;

    box-sizing: border-box;

}

Такой подход делает вёрстку более предсказуемой и удобной.

Блочная модель CSS — это основа понимания того, как формируются размеры и отступы элементов на странице. Знание структуры блока и принципов расчёта размеров позволяет избегать ошибок в вёрстке и создавать аккуратные интерфейсы. Использование свойства box-sizing помогает упростить работу и сделать поведение элементов более предсказуемым. Освоение блочной модели является важным шагом в изучении CSS и необходимой базой для дальнейшего развития навыков веб-разработки.