Box Model

С возвращением.

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

Теперь мы знакомимся с одной из самых важных идей в CSS:

Box model.

Каждый элемент на веб-странице воспринимается как коробка.

Заголовки?

Коробка.

Абзацы?

Коробка.

Изображения?

Коробка.

Кнопки?

Коробка.

Тот невинный маленький div?

Точно коробка.

CSS смотрит на твою страницу и видит коробки везде.

Как менеджер склада с дизайнерскими взглядами.

Что Ты Изучишь

В этом уроке ты узнаешь:

что такое CSS box model;
что означает content;
что делает padding;
что делает border;
что делает margin;
как работают width и height;
почему box-sizing важен;
как создавать чистые cards;
как избегать типичных проблем со spacing.

Что Такое Box Model?

CSS box model описывает, как работает пространство вокруг каждого элемента.

Каждая коробка имеет четыре главные части:

content;
padding;
border;
margin.

Можно представить это так:

margin
  border
    padding
      content

Content — это сам текст, изображение или реальное содержимое элемента.

Padding — это пространство внутри элемента.

Border — это линия вокруг элемента.

Margin — это пространство снаружи элемента.

Простая идея.

Огромное влияние.

Как открытие, что твои проблемы с layout — это не магия.

Это были коробки.

Коробки с самого начала.

Создай Проект

Создай папку для этого урока:

mkdir css-lesson4
cd css-lesson4
touch index.html
touch style.css

Ты должен получить:

css-lesson4/
  index.html
  style.css

Открой папку в своём editor.

Мы построим маленькую страницу с cards.

Cards идеально подходят для изучения box model.

Потому что они используют padding, margin, border, width и иногда эмоциональную поддержку.

Напиши HTML

Открой index.html и добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Box Model</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>CSS Box Model</h1>
    <p>Каждый элемент — это коробка. Да, даже тот.</p>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Что Такое Box Model?</h2>
      <p>
        Box model объясняет, как CSS вычисляет размер и отступы элементов.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Content</h2>
        <p>Реальный текст, изображение или содержимое внутри элемента.</p>
      </article>

      <article class="card">
        <h2>Padding</h2>
        <p>Пространство между content и border.</p>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>Линия вокруг padding и content.</p>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>Пространство снаружи элемента.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Создано во время изучения CSS box model.</p>
  </footer>
</body>
</html>

Это даёт нам:

header;
intro section;
четыре cards;
footer.

Теперь мы можем стилизовать коробки.

И да, наконец поймём, почему один margin может испортить утро.

Начни с Базовых Стилей

Открой style.css и добавь:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

Это создаёт базовый layout страницы.

Обрати внимание:

margin: 40px auto;

Это центрирует container .page горизонтально.

40px добавляет вертикальное пространство.

auto управляет пространством слева и справа.

CSS говорит:

“Дай мне посчитать стороны.”

И в этот раз CSS действительно помогает.

Редкий момент. Уважаем.

Content

Content — это внутренняя часть элемента.

Например:

<article class="card">
  <h2>Content</h2>
  <p>Реальный текст, изображение или содержимое внутри элемента.</p>
</article>

Текст внутри card — это content.

В CSS width и height обычно описывают размер content area.

Пример:

.card {
  width: 300px;
}

Это означает, что content area имеет ширину 300px.

Но есть маленькая проблема.

Padding и border могут увеличить финальный видимый размер.

Потому что CSS любит сюрпризы.

Не всегда приятные сюрпризы.

Padding

Padding — это пространство внутри элемента.

Он создаёт дыхание между content и border.

Добавь это:

.card {
  background-color: white;
  padding: 24px;
}

Теперь content не касается краёв.

Намного лучше.

Без padding текст сидит слишком близко к border.

Как человек, который стоит слишком близко и объясняет JavaScript closures.

Padding делает всё комфортнее.

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

padding: 24px;

Или отдельно:

padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;

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

padding: 20px 24px;

Это означает:

верх и низ: 20px;
лево и право: 24px.

Очень полезно.

Очень часто используется.

Border

Border — это линия вокруг элемента.

Добавь это:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
}

Border имеет три части:

border: width style color;

Пример:

border: 2px solid #e5e7eb;

Это означает:

width: 2px;
style: solid;
color: #e5e7eb.

Можно создавать разные border styles:

border: 2px solid #2563eb;
border: 2px dashed #f97316;
border: 2px dotted #16a34a;

Borders полезны для разделения контента.

Но не добавляй border везде.

Слишком много borders делают страницу похожей на spreadsheet после нервного срыва.

Border Radius

Property border-radius скругляет углы.

Добавь:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Теперь cards выглядят мягче.

Менее остро.

Менее похоже на официальный документ из 2004 года.

Можно использовать маленькие или большие значения:

border-radius: 8px;
border-radius: 16px;
border-radius: 999px;

999px часто используют для pill-shaped buttons.

Кнопка становится круглой и дружелюбной.

Будто хочет, чтобы её вежливо нажали.

Margin

Margin — это пространство снаружи элемента.

Добавь это:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 20px;
}

Теперь между cards есть пространство.

Margin отделяет элементы друг от друга.

Padding создаёт внутренний комфорт.

Margin создаёт внешнюю дистанцию.

Важная разница.

Padding говорит:

“Дай пространство моему content внутри меня.”

Margin говорит:

“Дай мне пространство от других.”

Оба нужны.

Очень по-человечески, если подумать.

Width и Height

Можно контролировать размер элементов с помощью width и height.

Пример:

.card {
  width: 300px;
}

Но будь осторожен с fixed widths.

Фиксированные ширины могут создавать проблемы на маленьких экранах.

Часто лучше использовать:

.card {
  max-width: 300px;
}

Или для containers:

.page {
  max-width: 900px;
}

max-width означает:

Не становись шире этого, но можешь быть меньше, если нужно.

Это полезно для responsive design.

Browser получает пространство для дыхания.

И твой layout не взрывается на телефонах.

Всегда хорошая вещь.

Проблема с Box-Sizing

По умолчанию CSS использует:

box-sizing: content-box;

Это означает:

width применяется только к content;
padding добавляется снаружи этой width;
border добавляется снаружи этой width.

Пример:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Финальная видимая ширина становится:

300px content
+ 40px padding
+ 4px border
= 344px total width

Это удивляет многих новичков.

И некоторых опытных developers.

И, возможно, одного человека в подвале, который до сих пор debug-ит layout из 2016 года.

Используй border-box

Большинство современных CSS-проектов используют это:

* {
  box-sizing: border-box;
}

Добавь это в начало CSS:

* {
  box-sizing: border-box;
}

Теперь width включает:

content;
padding;
border.

Это делает размеры проще.

Если ты напишешь:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Финальная видимая ширина остаётся 300px.

Намного предсказуемее.

CSS становится немного менее хаотичным.

Мы ценим этот редкий момент.

Стилизуй Layout Cards

Добавь это:

.cards {
  display: grid;
  gap: 20px;
}

Не переживай сейчас слишком сильно из-за Grid.

Мы изучим его позже.

Пока просто запомни:

gap: 20px;

создаёт пространство между cards.

Это часто чище, чем использовать много margins.

Теперь обнови стиль card:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Так как .cards использует gap, нам не нужен margin-bottom на каждой card.

Чище.

Более организованно.

Меньше CSS spaghetti.

Стилизуй Intro Card

Добавь:

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

Эта intro card использует:

background color;
padding;
border;
border radius;
margin.

Это box model в действии.

Не теория.

Настоящий layout.

Коробка вошла в здание.

Полный CSS

Твой style.css должен выглядеть так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
}

.card p,
.intro-card p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

Сохрани файл.

Обнови браузер.

Теперь ты должен увидеть чистые отступы и структуру cards.

Это работает box model.

Тихо.

За кулисами.

Как техническая команда, переодетая в CSS properties.

Частые Ошибки

Путать margin и padding

Padding — внутри.

Margin — снаружи.

Пример:

.card {
  padding: 24px;
  margin-bottom: 20px;
}

padding даёт пространство внутри card.

margin-bottom даёт пространство после card.

Если текст слишком близко к краю card, используй padding.

Если cards слишком близко друг к другу, используй margin или gap.

Просто.

Но легко перепутать.

CSS любит проверять концентрацию.

Забыть box-sizing

Без этого:

* {
  box-sizing: border-box;
}

Ширины могут стать неожиданными.

Используй border-box в большинстве проектов.

Это делает layouts легче для понимания.

Твой будущий ты поблагодарит.

Возможно, даже кофе.

Добавлять слишком много margin везде

Плохо:

h1 {
  margin: 50px;
}

p {
  margin: 50px;
}

.card {
  margin: 50px;
}

Слишком много margin везде создаёт хаос.

Используй spacing осознанно.

Не как бросание подушек в комнату с закрытыми глазами.

Практика

Создай страницу с:

одним header;
одной intro box;
тремя cards;
одним footer.

Стилизуй каждую card с помощью:

background color;
padding;
border;
border radius;
spacing между cards.

Используй:

box-sizing: border-box;

в начале CSS.

Потом экспериментируй с:

увеличением padding;
удалением padding;
добавлением border;
изменением margin;
использованием gap.

Наблюдай, как меняется layout.

CSS становится менее страшным, когда ты видишь, что делает каждая property.

Мини-Задание

Создай три pricing cards:

Basic;
Standard;
Premium.

Каждая card должна иметь:

title;
price;
короткое описание;
button link.

Используй box model, чтобы их стилизовать:

padding внутри cards;
border вокруг каждой card;
margin или gap между cards;
border radius для мягких углов;
box-sizing: border-box.

Сделай Premium card заметнее через другой цвет border.

Не слишком.

Только достаточно, чтобы сказать:

“Я особенная.”

А не:

“Я сбежала с карнавального плаката.”

Итог

Сегодня ты узнал, что:

каждый HTML element ведёт себя как коробка;
box model содержит content, padding, border и margin;
content — это реальный текст или media;
padding создаёт пространство внутри элемента;
border окружает padding и content;
margin создаёт пространство снаружи элемента;
width и height контролируют размер;
default sizing может запутывать;
box-sizing: border-box делает размеры проще;
spacing — одна из самых важных частей чистого дизайна.

Box model повсюду.

Если ты его понимаешь, CSS становится намного легче.

Если игнорируешь, твои layouts будут вести себя как бунтующая мебель.

А в жизни уже достаточно бунтующей мебели.

Следующий Урок

В следующем уроке мы изучим Flexbox.

Flexbox помогает выравнивать и организовывать элементы в одном направлении.

Rows.

Columns.

Центрированные вещи.

Наконец CSS поможет нам расставлять элементы без вызова древних духов.