Урок 4.3: Блочная модель

Что такое блок?

В вебе каждый HTML-тег — это прямоугольник. Серьёзно. Любой элемент на странице — от заголовка до картинки — это прямоугольная коробка. Браузер видит не «заголовок» и не «абзац», а прямоугольники, которые он расставляет по правилам.

У этого прямоугольника есть четыре слоя, как у матрёшки:

• content — содержимое (текст, картинка, другие теги)
• padding — внутренний отступ (от содержимого до рамки)
• border — рамка (личина, стиль, цвет)
• margin — внешний отступ (от рамки до соседних элементов)

Вся эта конструкция называется блочной моделью (box model). Это основа основ CSS. Если ты поймёшь блочную модель — ты поймёшь, как работает вёрстка.

Вот как это выглядит в коде. Каждый из этих слоёв мы задаём через CSS-свойства. И сейчас мы разберём каждое по отдельности.

Важно запомнить: браузер считает итоговую ширину элемента как width + padding-left + padding-right + border-left + border-right. То же самое с высотой. Это часто приводит к сюрпризам, но про это мы поговорим, когда дойдём до box-sizing.

Давай сразу посмотрим на простой пример. Вот HTML с одним абзацем, а ниже — CSS, который добавляет ему отступы и рамку:

<!-- HTML -->
<p class="box">Я — прямоугольник!</p>

<!-- CSS -->
.box {
  width: 300px;
  padding: 20px;
  border: 4px solid #e94560;
  margin: 30px;
  background: #0f3460;
}

Этот абзац занимает 300 + 20*2 + 4*2 = 348px на странице. Плюс внешние отступы. Запомни эту арифметику — она пригодится.

padding — внутренний отступ

padding — это пространство между содержимым элемента и его рамкой. Представь, что внутри коробки лежит вещь, и ты хочешь, чтобы она не касалась стенок — ты кладёшь мягкий слой вокруг неё. Вот это и есть padding.

Padding можно задать четырьмя способами:

/* Со всех сторон одинаковый */
padding: 20px;

/* По вертикали и горизонтали */
padding: 10px 30px; /* сверху/снизу 10px, слева/справа 30px */

/* Три значения: сверху, по бокам, снизу */
padding: 10px 20px 30px;

/* Четыре значения: сверху, справа, снизу, слева (по часовой) */
padding: 10px 20px 30px 40px;

/* Каждая сторона отдельно */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Самое частое использование — текст не должен прилипать к краям блока. Посмотри, как красиво выглядит кнопка с padding:

Вторая кнопка выглядит аккуратнее и профессиональнее, правда? Всё дело в padding — он даёт тексту «дышать».

Важно: padding увеличивает размер элемента. Если ты задал width: 200px и padding: 20px, элемент станет 240px в ширину (20 слева + 200 контент + 20 справа). Мы ещё вернёмся к этому, когда будем говорить про box-sizing.

border — рамка

border — это граница элемента. Она рисуется между padding и margin. У рамки есть три параметра, которые всегда идут вместе:

• толщина — 1px, 3px, 5px и т.д.
• стиль — solid (сплошная), dashed (пунктир), dotted (точки), double (двойная)
• цвет — любой цвет в CSS

/* Короткая запись (самый частый способ) */
border: 2px solid #e94560;

/* Можно задавать стороны отдельно */
border-top: 3px dashed #f97316;
border-bottom: 1px solid #444;

/* Или каждое свойство отдельно */
border-width: 2px;
border-style: solid;
border-color: #10b981;

/* Скругление уголков */
border-radius: 10px;    /* все углы */
border-radius: 10px 20px; /* верхние левый/правый, нижние правый/левый */

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

border-radius — это отдельная магия. Он скругляет углы. Чем больше значение, тем круглее элемент. При border-radius: 50% квадрат превращается в круг:

Обрати внимание: border тоже увеличивает размер элемента, как и padding. border: 5px добавляет 10px к ширине (5 слева + 5 справа).

margin — внешний отступ

margin — это пространство снаружи элемента. Оно отделяет этот элемент от соседних. Если padding — это «мягкая прослойка внутри коробки», то margin — это «расстояние между коробками на полке».

Записывается точно так же, как padding:

/* Со всех сторон */
margin: 20px;

/* По вертикали и горизонтали */
margin: 10px 30px;

/* Три и четыре значения — по тому же принципу */
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;

/* Отдельные стороны */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

У margin есть две важные особенности:

1. Схлопывание (collapsing). Когда два блока стоят друг под другом, их вертикальные margin'ы не складываются, а берётся最大ший. Если у верхнего блока margin-bottom: 30px, а у нижнего margin-top: 20px, расстояние между ними будет 30px, а не 50px.

2. Отрицательный margin. Да, margin может быть отрицательным! Тогда элемент «наезжает» на соседа или выходит за пределы родителя.

/* Надвинуть элемент влево */
margin-left: -20px;

/* Поднять элемент вверх */
margin-top: -30px;

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

Ещё у margin есть значение auto. Если задать margin: 0 auto блочному элементу с шириной, он отцентрируется по горизонтали:

.centered {
  width: 400px;
  margin: 0 auto;
}

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

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

width и height задают размеры области содержимого (content area). По умолчанию, если ты написал width: 200px, это ширина только контента, без padding и border.

.box {
  width: 200px;      /* ширина контента */
  height: 100px;     /* высота контента */
  padding: 20px;     /* +40px к итоговой ширине */
  border: 2px solid; /* +4px к итоговой ширине */
  /* Итоговая ширина: 200 + 40 + 4 = 244px */
}

Единицы измерения:

• px — пиксели (абсолютная единица)
• % — проценты от ширины родителя
• vw / vh — проценты от окна браузера (1vw = 1% ширины окна)
• em / rem — относительно размера шрифта
• auto — браузер сам вычисляет (по умолчанию)

Для высоты height: auto означает, что высота подстраивается под содержимое. Если задать фиксированную высоту height: 200px, а контента будет больше — он вытечет за пределы. Чтобы это исправить, используют overflow:

.box {
  height: 100px;
  overflow: hidden;    /* лишнее обрежется */
  overflow: scroll;    /* появится скролл */
  overflow: auto;      /* скролл только если нужно */
}

box-sizing: border-box — чтобы padding не ломал ширину

Помнишь, как мы считали width + padding + border = реальная ширина? Это часто бесит. Ты хочешь, чтобы блок был 300px, задаёшь width: 300px, добавляешь padding: 20px — и блок становится 340px. Приходится пересчитывать.

box-sizing: border-box решает эту проблему раз и навсегда. При нём width включает в себя и контент, и padding, и border. Блок всегда будет ровно той ширины, которую ты задал.

/* До — мучительная математика */
.box-old {
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* Реальная ширина: 344px */
}

/* После — покой и счастье */
.box-new {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid;
  /* Реальная ширина: 300px! */
}

Почти все разработчики сейчас пишут это в самый начале CSS:

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

Этот селектор применяет border-box ко всем элементам на странице. И дальше можно не париться — ширина всегда ведёт себя предсказуемо.

display: block, inline, inline-block

Каждый HTML-тег имеет тип отображения по умолчанию. Свойство display позволяет изменить его. Три основных значения:

display: block

Блочные элементы занимают всю ширину родителя и начинаются с новой строки. <div>, <p>, <h1>, <section> — все они блочные по умолчанию. У них работают width, height, margin, padding.

.block {
  display: block;  /* это значение по умолчанию для div */
  width: 300px;
  margin-bottom: 10px;
}

display: inline

Строчные элементы располагаются в строку друг за другом. <span>, <a>, <strong> — строчные. У них не работают width, height, margin-top/bottom. Padding работает только по бокам.

.inline {
  display: inline;
  /* width и height не сработают! */
}

display: inline-block

Гибрид. Элемент ведёт себя как строчный (встаёт в строку с другими), но при этом у него работают width, height, margin и padding как у блочного. Идеально для кнопок, карточек в сетке, иконок с подписями.

.btn {
  display: inline-block;
  padding: 12px 28px;
  margin: 8px;
  /* width и height тоже работают */
}

В современных проектах для раскладки чаще используют flex и grid (мы их пройдём в следующих уроках), но понимать разницу между block, inline и inline-block — база, без которой никуда.

DevTools: смотрим блочную модель

Браузерные инструменты разработчика (DevTools) — твой лучший друг в работе с блочной моделью. Вот как ими пользоваться:

1. Открой страницу в браузере (Chrome, Firefox, Edge)
2. Нажми F12 или ПКМ → Посмотреть код
3. Выбери вкладку Elements (или Инспектор)
4. Наведи мышкой на любой элемент в HTML-панели
5. Справа или снизу появится схема блочной модели

Вот что ты увидишь в этой схеме:

┌──────────────────────────────────────┐
│            margin: 30px              │
│  ┌──────────────────────────────┐   │
│  │         border: 4px          │   │
│  │  ┌────────────────────┐      │   │
│  │  │    padding: 20px   │      │   │
│  │  │  ┌──────────────┐  │      │   │
│  │  │  │  content     │  │      │   │
│  │  │  │  300 x 100   │  │      │   │
│  │  │  └──────────────┘  │      │   │
│  │  └────────────────────┘      │   │
│  └──────────────────────────────┘   │
└──────────────────────────────────────┘

Цвета в DevTools стандартные:

• Зелёный — content (контент)
• Жёлтый — padding (внутренний отступ)
• Оранжевый — border (рамка)
• Красный — margin (внешний отступ)

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

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

Практика: открытка с отступами и рамкой

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

Вот полный код. Можешь скопировать его в HTML-файл и открыть в браузере:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Открытка</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Georgia', serif;
    background: #fef3c7;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .card {
    width: 420px;
    background: #fff;
    padding: 40px 36px;
    border: 4px solid #e94560;
    border-radius: 20px;
    margin: 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .card h1 {
    font-size: 2em;
    color: #e94560;
    margin: 0 0 8px;
  }
  .card p {
    color: #555;
    line-height: 1.6;
    font-size: 1.1em;
    margin: 0 0 16px;
  }
  .card .highlight {
    display: inline-block;
    background: #e94560;
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.9em;
  }
</style>
</head>
<body>
  <div class="card">
    <h1>🎉 С Новым Годом!</h1>
    <p>Пусть все мечты сбываются,<br>а вёрстка не едет!</p>
    <div class="highlight">С любовью, CSS ❤️</div>
  </div>
</body>
</html>

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

• box-sizing: border-box — чтобы padding и border не вылезли за 420px
• padding: 40px 36px — текст не прилипает к краям открытки
• border: 4px solid #e94560 — красная рамка (как сургучная печать)
• border-radius: 20px — скруглённые углы, чтобы открытка была мягкой
• margin: 20px — отступ от краёв окна, если экран маленький
• box-shadow — тень, чтобы открытка парила над фоном

Попробуй поменять значения — увеличить padding до 60px, изменить border на dashed, поиграть с border-radius. Смотри, как меняется открытка. Это лучший способ понять блочную модель — крутить ручки и смотреть результат.

А теперь давай разберём ещё один пример — список контактов с иконками. Здесь мы используем inline-block для элементов списка, чтобы они стояли в ряд, и padding, чтобы сделать их удобными для нажатия пальцем:

<div class="contacts">
  <a href="#" class="contact-item">📧 Email</a>
  <a href="#" class="contact-item">📞 Телефон</a>
  <a href="#" class="contact-item">📍 Адрес</a>
</div>

<style>
  .contacts {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .contact-item {
    display: inline-block;
    padding: 16px 28px;
    text-decoration: none;
    color: #333;
    border-right: 1px solid #eee;
    transition: background 0.2s;
  }
  .contact-item:last-child {
    border-right: none;
  }
  .contact-item:hover {
    background: #f5f5f5;
  }
</style>

Заметь: display: inline-block позволяет ссылкам быть в одной строке, padding даёт большие области для клика (удобно на телефоне), а border-right разделяет их визуально. Без padding пришлось бы целиться мышкой в текст — муторно.

Давай ещё один пример — карточка профиля. Тут мы совместим всё, что изучили:

<div class="profile-card">
  <div class="avatar">👤</div>
  <h2>Анна Иванова</h2>
  <p class="bio">Веб-разработчик, люблю CSS</p>
  <div class="stats">
    <span class="stat">42 проекта</span>
    <span class="stat">128 подписчиков</span>
  </div>
</div>

<style>
  .profile-card {
    width: 320px;
    margin: 40px auto;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }
  .avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #fff;
  }
  .profile-card h2 {
    margin: 0 0 4px;
    color: #333;
  }
  .bio {
    color: #777;
    margin: 0 0 20px;
    font-size: 0.95em;
  }
  .stats {
    padding-top: 16px;
    border-top: 1px solid #eee;
  }
  .stat {
    display: inline-block;
    margin: 0 8px;
    padding: 4px 14px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 0.85em;
    color: #555;
  }
</style>

В этой карточке мы используем margin: 0 auto для центрирования, padding для отступов внутри, border-radius: 50% для аватара-круга, border для границы и разделителя. Каждый элемент — прямоугольник со своими отступами.

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

/* БЛОЧНАЯ МОДЕЛЬ — ШПАРГАЛКА */

/* Внутренние отступы */
padding: 20px;           /* со всех сторон */
padding: 10px 30px;      /* верх/низ   лево/право */
padding: 10px 20px 30px; /* верх  лево/право  низ */

/* Рамка */
border: 2px solid #e94560;
border-radius: 8px;      /* скругление */

/* Внешние отступы */
margin: 20px;
margin: 0 auto;          /* центрирование по горизонтали */

/* Размеры */
width: 300px;
height: 200px;

/* Спасительное свойство */
box-sizing: border-box;

/* Типы отображения */
display: block;          /* блочный — с новой строки */
display: inline;         /* строчный — в строку */
display: inline-block;   /* и в строке, и с размерами */

Главное, что нужно запомнить из этого урока:

• Каждый элемент — прямоугольник с content, padding, border, margin
• padding внутри, margin снаружи, border посередине
• По умолчанию padding и border увеличивают размер элемента
• box-sizing: border-box делает ширину предсказуемой
• block, inline, inline-block — три режима поведения элемента
• DevTools показывает блочную модель визуально — пользуйся им!

В следующем уроке мы разберём Flexbox — мощный инструмент для раскладки элементов. А пока — поэкспериментируй с открыткой, поменяй значения, поломай и почини её. Это лучший способ научиться.