Урок 15. Примеры: Блочная модель: content, padding, border, margin

Рабочие примеры

В каждом примере слева код, сверху — реальный результат. Сравнивай и экспериментируй.

1. Padding — «воздух» внутри блока

Фон заходит под padding, поэтому содержимое отодвигается от рамки внутрь.

.card {
  background: #ecfeff;
  border: 2px solid #0f766e;
  border-radius: 8px;
  padding: 24px;
  max-width: 320px;
}

2. Та же карточка без padding

Уберём padding — текст прилипает к рамке. Сравни с примером выше.

.card {
  background: #ecfeff;
  border: 2px solid #0f766e;
  border-radius: 8px;
  padding: 0;        /* было 24px */
  max-width: 320px;
}

3. Margin — расстояние между блоками

margin создаёт пустоту снаружи. Фон под него не заходит.

.a { margin-bottom: 32px; }
.b { /* прижат к A, но между ними 32px */ }

4. Где взялась «лишняя» ширина

Заданная width: 240px, но реальная ширина больше из-за padding и border.

/* реальная ширина = 240 + 40 + 8 = 288px */
.box {
  width: 240px;
  padding: 20px;
  border: 4px solid #ea580c;
}