Блочная модель в CSS: как устроены элементы на странице
2026-02-21 20:00 Diff
https://skillbox.ru/media/base/blochnaya-model-v-css-kak-ustroeny-elementy-na-stranice/

#База знаний

  • 19 июн 2025
  • 0

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

Само содержимое элемента (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.

Каждый 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.

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

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 пикселей.
Скриншот: Google Chrome / Skillbox Media

Размер 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;

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

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

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

Чтобы добавить рамку, используют свойство 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; /* Жёлтая пунктирная рамка */Скриншот: Google Chrome / Skillbox Media

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

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

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

Явное значение через 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 */

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

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

Свойство 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; }

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

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

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

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

Свойство 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 со всех сторон.

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

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

width: 50%; margin: 20px auto;

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

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

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

margin-top: -30px;

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

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

Стандартный (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 */

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

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

Альтернативная модель (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; }

Теперь отступы сверху и снизу работают — вокруг кнопки появляется пространство, и она уже не сливается с текстом.

Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше