Код Справочник по фронтенду

#База знаний

19 июн 2025
0

Блочная модель в CSS: как устроены элементы на странице

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

Иллюстрация: Polina Vari для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Веб-страница строится из блоков. Браузер размещает их на экране по определённым правилам — их описывает блочная модель CSS. Понимание этой модели — основа веб-вёрстки: без неё невозможно управлять расположением блоков и создавать аккуратный интерфейс.

Содержание

Что такое блочная модель CSS
Как браузер использует блочную модель
Отступы и границы элементов в блочной модели CSS
Содержимое (content)
Внутренний отступ (padding)
Рамки (border)
Свойство border-radius
Внешний отступ (margin)
Свойство box-sizing: border-box
Типичные ошибки

Что такое блочная модель CSS

Когда вы создаёте сайт, вы работаете с прямоугольниками. Заголовки, изображения, кнопки, текст — всё это прямоугольные области, которые браузер размещает на экране. Например, текст на сайте с точки зрения браузера — это не просто слова, а прямоугольник с текстом внутри.

CSS — язык оформления страниц — управляет тем, как эти прямоугольники выглядят и как они располагаются. А чтобы браузер знал, как правильно посчитать размеры каждого элемента, для CSS придумали блочную модель.

В блочной модели четыре слоя. Содержимое (content) — это то, что мы видим внутри элемента: текст, изображение, кнопка. Его можно настроить с помощью свойств вроде color, font-size, width, height.

А вот три внешних слоя — это то, что управляет расстояниями и рамками вокруг содержимого. Именно они определяют, сколько места займёт элемент на странице и как он будет отделён от других. Это:

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

Без знания блочной модели сложно понять:

почему элементы иногда налезают друг на друга;
почему блок выходит за границы экрана;
почему кнопка стала шире, хотя вы явно задали ширину.

Как браузер использует блочную модель

Когда вы пишете CSS-код и, например, задаёте элементу ширину width: 200px, браузер:

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

Если забыть о дополнительных слоях, можно легко ошибиться: вы рассчитывали на ширину 200 пикселей, а блок оказался 260 — и сдвинул соседние элементы или вылез за пределы родительского контейнера.

Браузер всегда смотрит на блочную модель — именно по ней он решает, какой у элемента итоговый размер и где он будет расположен.

Отступы и границы элементов в блочной модели CSS

Само содержимое элемента (content) не настраивается с помощью CSS напрямую — только его размеры, шрифт, цвет и другие визуальные свойства. Зато все остальные слои блочной модели — внутренние отступы (padding), границы (border) и внешние отступы (margin) — можно настраивать по сторонам: сверху, справа, снизу и слева.

CSS даёт возможность настраивать отдельно каждую сторону блока: верхнюю, правую, нижнюю и левую. Для этого у каждого свойства есть четыре варианта:

top — верх,
right — право,
bottom — низ,
left — лево.

Примеры:

margin-top: 20px; /* Сдвигает блок вниз, оставляя 20 пикселей сверху */
padding-left: 10px; /* Добавляет 10 пикселей внутри слева — текст отодвигается от границы */
border-right: 2px solid black; /* Чёрная рамка справа, 2 пикселя толщиной */

Как сократить запись

Иногда отступы или границы нужно задать сразу для нескольких сторон. Чтобы не писать каждую по отдельности, можно использовать сокращённую запись. Она работает по определённым правилам:

padding: 10px; — 10 пикселей со всех сторон.
padding: 10px 20px; — 10 пикселей сверху и снизу, 20 пикселей слева и справа.
padding: 10px 20px 30px; — 10 сверху, 20 справа и слева, 30 снизу.
padding: 10px 20px 30px 40px; — по часовой стрелке: верх, право, низ, лево.

Те же правила работают для margin и border.

Содержимое (content)

Каждый HTML-элемент существует ради содержимого — текста, изображения, кнопки, формы или любого другого контента. Именно его вы видите внутри блока. Всё остальное (отступы, рамки и так далее) — это оформление вокруг содержимого.

Чтобы указать, насколько широким и высоким будет элемент, используют CSS-свойства:

width — ширина;
height — высота.

Пример: создаём два блока

Вот простой пример: два прямоугольных блока с разным фоном.

HTML

<div class="element1">Блок 1</div>
<div class="element2">Блок 2</div>

CSS

.element1 {
  width: 100px;
  height: 30px;
  background-color: #673ab7; /* Фиолетовый фон */
}

.element2 {
  width: 60px;
  height: 30px;
  background-color: #f33a07; /* Красный фон */
}

В итоге мы получим такие блоки:

*Скриншот: Google Chrome / Skillbox Media*

Внутренний отступ (padding)

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

Пример: два блока с внутренними отступами

HTML

<div class="element1">Блок 1</div>
<div class="element2">Блок 2</div>

CSS

.element1 {
  width: 60px;
  height: 30px;
  padding: 20px; /* Отступ 20px со всех сторон */
  background-color: #673ab7;
  color: white;
}

.element2 {
  width: 60px;
  height: 30px;
  padding: 20px 10px 60px 212px; /* Отступ сверху, справа, снизу, слева */
  background-color: #f33a07;
  color: white;
}

Что здесь происходит

В первом блоке (element1) у текста появятся одинаковые отступы внутри блока: сверху, снизу, слева и справа — по 20 пикселей.
Во втором блоке (element2) заданы разные отступы: сверху — 20 пикселей; справа — 10 пикселей; снизу — 60 пикселей; слева — 212 пикселей.

Какие бывают значения padding

Размер padding можно задавать разными способами. Разберём, какие бывают значения, когда и зачем их использовать.

Фиксированные значения: px

Наиболее понятный способ задать отступ — в пикселях:

padding: 20px;

Отступ будет ровно 20 пикселей и не изменится при масштабировании страницы. Подходит, когда нужен стабильный, жёстко заданный размер.

Относительные значения: em и rem

Единицы em и rem привязаны к размеру шрифта:

em — зависит от текущего шрифта элемента;
rem — зависит от базового шрифта страницы, обычно заданного в теге <html>.

padding: 2em;

Если размер шрифта — 16 пикселей, отступ будет 32 пикселя (16 × 2). Такие значения удобно использовать, когда нужно, чтобы отступы масштабировались вместе с текстом — например, в адаптивной вёрстке.

Проценты: %

Значения в процентах рассчитываются от ширины родительского элемента. Это позволяет сделать отступы гибкими.

padding: 10%;

Если ширина родительского блока — 600 пикселей, отступ будет 60 пикселей. Если родитель станет уже — отступ уменьшится. Обратите внимание, что в качестве единицы всегда используется только ширина блока, даже если вы настраиваете отступы по высоте.

Функция calc ()

Иногда нужно задать отступ, комбинируя разные единицы. Например, вам нужно, чтобы отступ был и фиксированным, и адаптивным:

padding: calc(10% + 20px);

Такой подход даёт больше гибкости: часть отступа будет меняться вместе с шириной родителя, а часть останется постоянной.

Служебные значения: inherit, initial, unset

CSS допускает и специальные значения, которые управляют тем, как padding наследуется или сбрасывается:

inherit — элемент наследует отступ от родителя;
initial — возвращает значение по умолчанию (обычно 0);
unset — сбрасывает значение до inherit или initial в зависимости от контекста.

padding: inherit;

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

Рамки (border)

Рамки нужны, чтобы придать блоку законченность и отделить его от окружающего пространства.

Чтобы добавить рамку, используют свойство border. Оно состоит из трёх частей:

border: толщина стиль цвет;

Например:

border: 5px solid black;

Значит: рамка толщиной 5 пикселей, сплошная, чёрного цвета.

Пример: два блока с разными рамками

HTML

<div class="element1">Блок с тёмно-синей рамкой</div>
  <div class="element2">Блок с жёлтой пунктирной рамкой</div>

CSS

body {
      font-family: sans-serif;
      padding: 40px;
    }

    .element1, .element2 {
      width: 200px;
      height: auto;
      padding: 20px;
      color: white;
      font-size: 16px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .element1 {
      background-color: #3f51b5;
      border: 4px solid #1a237e; /* Тёмно-синяя сплошная рамка */
    }

    .element2 {
      background-color: #e53935;
      border: 4px dashed #ffc107; /* Жёлтая пунктирная рамка */

Стилей рамок всего восемь:

solid — сплошная;
dotted — пунктирная;
dashed — прерывистая;
double — двойная;
groove — имитирует внутреннюю бороздку;
ridge — выпуклая;
inset — вдавленная;
outset — выступающая.

Как задать толщину рамки

Есть несколько способов задать толщину рамки.

Явное значение через border-width

Это основной способ. Вы задаёте толщину в единицах:

.element {
  border-width: 4px;
}

Можно использовать:

px — пиксели;
em, rem — относительные значения, зависящие от размера шрифта;
% — процент от ширины блока.

Через ключевые слова (thin, medium, thick)

CSS поддерживает специальные слова:

.element {
  border: thin solid black;
}

Они не дают точного значения в пикселях — браузер сам подбирает толщину:

thin — обычно 1px;
medium — 3px;
thick — 5px.

Эти значения могут немного различаться в разных браузерах.

Как задать рамки только с одной стороны

CSS позволяет управлять каждой стороной отдельно:

border-top — верхняя рамка;
border-right — правая рамка;
border-bottom — нижняя рамка;
border-left — левая рамка.

Каждой из этих сторон можно задать стиль, ширину и цвет.

border-top: 2px solid red;      /* Вверху — красная сплошная линия толщиной 2px */
  border-bottom: 4px dashed green;/* Внизу — зелёная прерывистая линия толщиной 4px */
  border-left: none;              /* Слева — рамки нет */
  border-right: 1px dotted gray;  /* Справа — серая пунктирная линия толщиной 1px */

Выглядят рамки с одной стороны вот так:

Свойство border-radius

Свойство border-radius позволяет скруглить углы. Радиус скругления задаётся в пикселях или в процентах. Под процентами имеется в виду процент от ширины прямоугольника. То есть border-radius: 50% превратит квадратный элемент в круг.

Это свойство сработает, даже если у элемента нет рамки.

Можно задать один радиус для всех углов:

border-radius: 10px;

Или отдельный радиус для каждого угла:

border-radius: 10px 20px 30px 40px;

Сделаем для примера блок с разными скруглениями углов.

HTML

<div class="element">
    Это пример блока с разными углами
  </div>

CSS

body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  padding: 40px;
}

.element {
  width: 250px;
  padding: 20px;
  background-color: #e0f0ff; /* Голубой фон */
  border: 2px solid #0077cc; /* Синяя рамка */
  border-radius: 12px 16px 24px 8px; /* Разные углы по часовой стрелке */
  color: #003355;
  font-size: 16px;
  line-height: 1.5;
}

В итоге мы получим вот такой блок:

Ну и наконец, все свойства можно применить одновременно:

Внешний отступ (margin): как разделять элементы на странице

Свойство margin — это внешний отступ. Оно добавляет пространство вне блока, отделяя его от других элементов.

Пример: два блока с внешним отступом

CSS

.element1 {
      width: 120px;
      height: 70px;
      padding: 15px;
      background-color: #5a4db2;
      border: 3px solid #3f3675;
      color: white;
      font-family: Arial, sans-serif;
      font-weight: 600;
    }

    .element2 {
      width: 140px;
      height: 70px;
      padding: 15px;
      background-color: #e94e3a;
      border: 3px solid #ffffffcc;
      color: white;
      margin: 20px; /* отступ 20px со всех сторон */
      font-family: Arial, sans-serif;
      font-weight: 600;
    }

Первый блок (element1) прижмётся к краю экрана настолько близко, насколько ему позволит браузер

Второй блок (element2) будет окружён свободным пространством в 20px со всех сторон.

Центрирование с помощью margin

С помощью внешних отступов можно центрировать элемент на экране. Для этого нужно задать фиксированную ширину блока и использовать margin: auto по горизонтали:

width: 50%;
  margin: 20px auto;

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

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

Отрицательные значения

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

margin-top: -30px;

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

Свойство box-sizing: border-box. Стандартная и альтернативная блочные модели

Есть два способа вычисления размеров элемента в блочной модели: стандартный и альтернативный.

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

.element1 {
    width: 100px;
    height: 70px;
    padding: 30px;
    border: 5px solid chocolate;
    background-color: lightcoral;
    box-sizing: content-box;  /* Стандартная модель */
  }
/*element1_width = 100 + 30×2 + 5×2 = 170px*/
/*element1_height = 70 + 30×2 + 5×2 = 140px*/

Альтернативный (box-sizing: border-box) — ширина и высота включают в себя и содержимое, и padding, и border, так что общий размер остаётся неизменным.

.element2 {
    width: 100px;
    height: 70px;
    padding: 30px;
    border: 5px solid chocolate;
    background-color: lightcoral;
    box-sizing: border-box; /* Альтернативная модель */
  }
/* element2_width = 100px */
/* element2_height = 70px */

Вот так эти два элемента с одинаковыми высотой, шириной, внутренними отступами и границами будут выглядеть рядом:

Альтернативная модель (border-box) делает вёрстку предсказуемее: элемент не выползает за границы из-за внутренних отступов и рамок. Поэтому сейчас во всех проектах используют именно её.

Обычно border-box задают по умолчанию для всех элементов:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Здесь знак * означает, что свойство border-box применится ко всем элементам. *::before — выбирает все псевдоэлементы ::before для всех элементов. *::after — делает то же самое, но для псевдоэлемента ::after. Их нужно упомянуть потому, что псевдоэлементы тоже могут иметь размеры, отступы и рамки. Чтобы они вели себя так же, как и обычные элементы, их нужно явно включить в общую систему. Именно поэтому их добавляют в такой глобальный селектор.

Типичные ошибки

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

У margin есть одна особенность: вертикальные отступы между двумя блочными элементами могут схлопнуться. То есть браузер не складывает их, а выбирает наибольший.

Пример:

.block1 {
  margin-bottom: 30px;
}

.block2 {
  margin-top: 20px;
}

У первого блока margin-bottom: 30px, у второго — margin-top: 20px. На экране расстояние между ними получится 30 px, а не 50 px, потому что вертикальные внешние отступы схлопнулись в один.

На практике самый простой способ избежать схлопывания — использовать отступ либо только снизу у первого элемента, либо только сверху у второго. Если убрать margin-top у второго блока и оставить только margin-bottom: 50px у первого, то расстояние будет 50 px, как ожидается.

Добавлять вертикальные внешние отступы строчным элементам. Кроме блочных элементов, в HTML есть строчные, они размещаются прямо внутри текста. Это, например, тег <a>, создающий гиперссылку, или тег <b>, выделяющий текст жирным шрифтом. Если вы добавите к такому элементу отступ сверху или снизу — margin-top или margin-bottom, — ничего не произойдёт.

Строчные элементы существуют внутри строки — как символы текста. Если их высоту поменять, во многих случаях вёрстка сломается.

Но если это необходимо, можно превратить строчный элемент в строчно-блочный. Для этого нужно добавить CSS-свойство:

display: inline-block;

Так элемент останется внутри текста, но уже будет вести себя частично как блок и сможет оттолкнуть элементы сверху и снизу.

HTML:

<p>
  Нажмите <button class="inline-btn">сюда</button>, чтобы продолжить.
</p>

CSS:

.inline-btn {
  margin-top: 15px;
  margin-bottom: 15px;
  background: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
}

Что происходит

Кнопка — строчный элемент по умолчанию, и, хотя в стилях написано margin-top: 15px, отступ сверху не сработает. Кнопка останется встроенной в строку и не сможет раздвинуть её вверх или вниз.

Задаём display: inline-block:

.inline-btn {
  margin-top: 15px;
  margin-bottom: 15px;
  background: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
  display: inline-block;
}