Это фундаментальная концепция веб-верстки. Представим, что каждый HTML-элемент — это блок (коробка).
Блочная модель (Box Model) описывает, из каких слоев состоит эта коробка и как они влияют на ее размер и положение на странице.
Вот как эти 4 составляющие располагаются от центра наружу:
1. Content (Содержимое)
Центральная, самая важная часть.
Это область, где непосредственно отображается содержимое элемента: текст, изображение, видео и другие дочерние элементы.
- Что находится: текст, картинки, вложенные блоки.
- Размеры: свойства width и height по умолчанию задают размер именно этой области, без учета отступов и границ.
Пример HTML:
<div class="block">Текст</div>
Пример CSS:
.block {
width: 100px;
height: 50px;
}2. Padding (Внутренний отступ)
Прозрачное пространство между содержимым и рамкой.
Это «воздух» внутри элемента, который отодвигает контент от границы. Он наследует фон элемента (цвет или картинку).
Пример HTML:
<div class="block">Текст</div>
Пример CSS:
.block {
width: 100px;
height: 50px;
padding: 20px; /* Отступ 20px со всех сторон */
}2.1. Значения padding:
1. Абсолютные (фиксированные): px, pt, cm, mm, in
/* Пример фиксированного значения */ padding: 10px;
2. Относительные:
- % — от ширины родительского блока (даже для вертикальных отступов!)
- em / rem — относительно размера шрифта элемента или корневого элемента
- vw, vh — относительно ширины/высоты окна браузера
- ex, ch — относительно высоты символа x или ширины символа 0
/* Пример относительных значений в % */ padding: 10%; /* Пример относительных значений в em */ padding: 3em;
2.2. По количеству значений:
| Количество значений | Что означает | Пример |
|---|---|---|
| 1 значение | все 4 стороны одинаково | padding: 10px; |
| 2 значения | 1-е = верх/низ, 2-е = право/лево | padding: 10px 20px; |
| 3 значения | верх, право/лево, низ | padding: 10px 20px 30px; |
| 4 значения | верх, право, низ, лево (по часовой стрелке) | padding: 10px 20px 30px 40px; |
2.3. Специальные значения:
- padding: 0; — убрать отступы
- padding: inherit; — наследовать значение от родителя
- padding: initial; — сбросить к значению по умолчанию (обычно 0)
- padding: unset; — либо наследует, либо сбрасывает
2.4. Индивидуальные свойства:
Можно задавать отдельно:
padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
3. Border (Граница / Рамка)
Линия, очерчивающая границу элемента.
Она оборачивает контент и внутренние отступы, а так же выполняет функцию визуального разделителя между элементами (если граница прерывистая, можно увидеть фон сквозь неё).
Пример:
/* Толщина | Стиль | Цвет */ border: 2px solid red;
3.1. Стиль рамки (обязательный параметр):
Если не указать стиль, рамки не будет вообще (браузер проигнорирует толщину и цвет). Доступны следующие ключевые слова:
- solid — сплошная линия (самый популярный).
- dashed — пунктирная линия (черточки).
- dotted — линия из точек.
- double — двойная сплошная линия. Толщина распределяется между двумя линиями и промежутком между ними.
- groove — объемная вдавленная линия (создает эффект выреза).
- ridge — объемная выпуклая линия (противоположность groove).
- inset — создает эффект, что весь блок вдавлен внутрь.
- outset — создает эффект, что блок выступает наружу.
- none (или hidden) — рамка отсутствует (значение по умолчанию).
3.2. Толщина рамки (ширина):
Задается в любых единицах длины (пиксели px, em, rem, проценты % не работают для рамки).
Точные значения: 1px, 3px, 10px и т.д.
Текстовые значения (устаревшие, но работают):
- thin (тонкая — обычно 1px)
- medium (средняя — обычно 3px, значение по умолчанию)
- thick (толстая — обычно 5px)
3.3. Цвет рамки:
Задается любыми форматами CSS:
- Имя цвета (red, blue).
- HEX (#ff0000).
- RGB/RGBA (rgba(0,0,0,0.5)).
- HSL/HSLA.
- Ключевое слово transparent (прозрачная рамка — нужна, чтобы занимать место, но быть невидимой).
4. Margin (Внешний отступ)
Абсолютно прозрачное пространство снаружи рамки.
Эта область служит для создания расстояния между текущим элементом и соседними.
4.1. По типу единиц измерения:
1. Абсолютные: px, pt, cm, mm, in
2. Относительные:
- % — всегда от ширины родительского блока (даже для вертикальных margin-top/bottom! Это важно).
- em / rem — относительно размера шрифта элемента или корневого элемента
- vw, vh — относительно окна браузера
- auto — специальное значение (об этом ниже)
4.2. По количеству значений:
| Количество значений | Что означает | Пример |
|---|---|---|
| 1 значение | все 4 стороны одинаково | margin: 10px; |
| 2 значения | 1-е = верх/низ, 2-е = право/лево | margin: 10px 20px; |
| 3 значения | верх, право/лево, низ | margin: 10px 20px 30px; |
| 4 значения | верх, право, низ, лево (по часовой стрелке) | margin: 10px 20px 30px 40px; |
4.3. Индивидуальные свойства:
margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
4.4. Специальное значение auto:
| Сценарий | Результат |
|---|---|
| margin: 0 auto; | Горизонтальное центрирование блочного элемента с заданной шириной (элемент встанет по центру родителя) |
| margin-left: auto; | Прижимает элемент к правому краю (выталкивает вправо) |
| margin-right: auto; | Прижимает элемент к левому краю |
| margin: auto; (все стороны) | Центрирует элемент и по вертикали, и по горизонтали (работает только во Flexbox/Grid или при position: absolute) |
4.5. Отрицательные значения:
В отличие от padding, у margin могут быть отрицательные числа:
margin-top: -20px; /* элемент "поднимется" вверх, перекрывая соседа */ margin-left: -30px; /* элемент "выедет" влево за пределы родителя */
Важное дополнение: box-sizing
По умолчанию в CSS работает box-sizing: content-box. Это значит, что если вы задали width: 300px, а потом добавили padding: 20px и border: 5px, то реальная ширина блока станет 350px (300 + 20*2 + 5*2). Это часто ломает верстку.
Чтобы избежать этого, почти всегда используют:
* {
box-sizing: border-box;
}В этой модели ширина (width) = content + padding + border. Толщина внутренних слоев «съедается» из места контента, и общий размер блока остается равен 300px, как вы и задумали.