← Все вопросы

Что такое box model (модель блока) — margin, border, padding, content?

Задан 15 месяцев назад1к просмотров2 ответа
6

Везде упоминают «блочную модель» и рисуют какие-то вложенные прямоугольники. Что это вообще и зачем мне это понимать как новичку?

Данил Григорьев 🐣 Птенец
спросил 15 месяцев назад

2 ответа

11
✓ Принятый ответ — помог автору

Блочная модель — это про то, что каждый элемент на странице это прямоугольник, состоящий из 4 слоёв (изнутри наружу):

  1. content — само содержимое (текст, картинка). Его размер задают width и height.
  2. padding — внутренний отступ вокруг содержимого.
  3. border — рамка вокруг padding.
  4. margin — внешний отступ, расстояние до соседей.

Как луковица: content в центре, потом padding, потом border, потом margin.

.card {
  width: 200px;
  padding: 15px;
  border: 2px solid gray;
  margin: 10px;
}

Понимать это важно, потому что итоговая ширина блока по умолчанию = width + padding + border, и из-за этого блоки часто оказываются шире, чем ты ожидал.

Кирилл Борисов 🐣 Птенец
15 месяцев назад
6

Лайфхак, который ставят почти все: добавь в начало стилей

* {
  box-sizing: border-box;
}

Тогда width будет включать в себя padding и border, и блок не «распухает». Жить станет сильно проще.

Андрей Соколов 🐣 Птенец
15 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.