логотип PurpleSchool
Иконка входа
Вход
  • Обучение
  • Войти
логотип PurpleSchool

Блочная модель в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

В веб-разработке все элементы на HTML-странице рассматриваются браузером как прямоугольники. Этот подход упрощает работу с элементами, позволяя разработчикам легко управлять их размерами и положением. Для понимания того, как браузер рассчитывает размер этих прямоугольников, необходимо изучить одну из основных концепций верстки – блочную модель (Box Model).

Основные составляющие блочной модели

Блочная модель состоит из нескольких компонентов, каждый из которых влияет на общий размер элемента. Эти компоненты включают:

  1. Content (Содержимое): основное содержимое элемента, его текст или другие вложенные элементы.
  2. Padding (Внутренние отступы): пространство между содержимым и границей элемента.
  3. Border (Граница): рамка вокруг элемента, которая может иметь разную толщину и стиль.
  4. Margin (Внешние отступы): пространство между границей элемента и соседними элементами.

Пример блочной модели

Рассмотрим пример HTML-элемента с применением CSS-стилей:

<div class="box">Пример содержимого</div>
.box {
  width: 200px; /* ширина содержимого */
  height: 100px; /* высота содержимого */
  padding: 20px; /* внутренние отступы */
  border: 5px solid black; /* граница */
  margin: 10px; /* внешние отступы */
}

На основе этого примера, рассмотрим, как рассчитывается общий размер элемента.

Расчет размеров элемента

Ширина элемента

Для расчета полной ширины элемента используются следующие компоненты:

  • Ширина содержимого (width)
  • Внутренние отступы (padding-left и padding-right)
  • Граница (border-left и border-right)
  • Внешние отступы (margin-left и margin-right)

Полная ширина элемента рассчитывается по формуле:

Полная ширина = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Применительно к нашему примеру:

Полная ширина = 200px (width) + 20px (padding-left) + 20px (padding-right) + 5px (border-left) + 5px (border-right) + 10px (margin-left) + 10px (margin-right) = 270px

Высота элемента

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

  • Высота содержимого (height)
  • Внутренние отступы (padding-top и padding-bottom)
  • Граница (border-top и border-bottom)
  • Внешние отступы (margin-top и margin-bottom)

Полная высота элемента рассчитывается по формуле:

Полная высота = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Применительно к нашему примеру:

Полная высота = 100px (height) + 20px (padding-top) + 20px (padding-bottom) + 5px (border-top) + 5px (border-bottom) + 10px (margin-top) + 10px (margin-bottom) = 170px

Блочная модель в действии

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

box-sizing

Свойство box-sizing позволяет управлять тем, как рассчитывается общая ширина и высота элемента. Оно может принимать два значения:

  • content-box (по умолчанию): размеры элемента рассчитываются только на основе содержимого, а padding и border добавляются к общей ширине и высоте.
  • border-box: размеры элемента включают padding и border, что упрощает расчет общей ширины и высоты.

Пример использования box-sizing:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* Включаем padding и border в width и height */
}

В этом случае, полная ширина и высота элемента останутся 200px и 100px соответственно, так как padding и border уже включены в эти размеры.

Заключение

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

изображение курса

HTML и CSS

Антон Ларичев
иконка часов19 часов лекций
иконка звёздочки рейтинга4.9
Frontend
Mobile
2 999 ₽
HTML и CSS