Загрузка...

Внешние отступы (margin) в CSS

Вы красите коробку, рисуете границу и скругляете углы. Следующий навык: отодвинуть коробки друг от друга. margin — внешний зазор вокруг элемента — воздух снаружи границы.

Что такое margin?

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

Margin против padding (короткий контраст)

Padding (следующий урок) — внутри границы, между содержимым и краем. Margin — снаружи границы, между этой коробкой и следующей. Если запомните одну строку сегодня: margin = снаружи, padding = внутри.

Сокращение: сколько значений?

Можно передать одну, две, три или четыре длины. Порядок сторон фиксирован.

📊 Число значений сокращения margin

Значения Смысл Повседневная заметка
1 Все четыре стороны одинаковы Равный «воздух» вокруг карточки
2 Верх+низ, затем лево+право Вертикальная и горизонтальная пары
3 Верх, лево+право, низ Реже — знайте, что существует
4 Верх, право, низ, лево Полный контроль, по часовой сверху

Одинаковый отступ на каждой стороне

Начните с одной длины для всех сторон.

Одинаковый margin на всех сторонах

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Два значения — вертикаль, потом горизонталь

Две длины связывают противоположные стороны: сначала верх и низ; затем лево и право.

Вертикальный затем горизонтальный margin

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Четыре значения — по часовой сверху

Когда каждой стороне нужен свой зазор: верх → право → низ → лево.

Четырёхстороннее сокращение margin

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Центрировать блок через auto

Для блочной коробки с заданной шириной margin-left: auto и margin-right: auto (часто margin: 0 auto) делят оставшееся место поровну — классический способ центрировать по горизонтали.

Горизонтальное центрирование через auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Вертикальные margin могут схлопываться

Когда два блочных элемента стоят друг над другом, нижний margin первого и верхний второго часто схлопываются (collapse) в один зазор — обычно больший из двух, не сумма. Это удивляет новичков; ждите этого между абзацами и секциями.

Сложенные блоки со схлопыванием margin

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Между ними часто видно около 24px, не 48px */

Одна сторона за раз

Длинные формы вроде margin-top идеальны, когда нужен только отступ над заголовком или под кнопкой.

Только верхний margin

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

Попробуйте сами

  1. Дайте двум карточкам margin: 16px и посмотрите внешний зазор.
  2. Перепишите одну как margin: 24px 12px и заметьте вертикаль vs горизонталь.
  3. Отцентрируйте коробку шириной 280px через margin: 0 auto.
  4. Сложите два цветных блока с margin-bottom и margin-top по 24px — зазор похож на 24 или 48?
  5. Отступите заголовок только через margin-top.

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

  • Использовать margin, когда нужен был padding (внутренняя подушка для текста)
  • Ждать, что margin: auto центрирует каждый flex/grid-элемент как простой блок (важен контекст вёрстки)
  • Складывать верхний и нижний margin и считать, что они всегда суммируются (collapse может уменьшить зазор)
  • Огромные margin везде вместо маленькой согласованной шкалы
  • Путать порядок четырёх значений (верх, право, низ, лево)

Кратко

  • Margin — внешний простор снаружи границы
  • Сокращение: 1, 2 или 4 значения (четыре по часовой сверху)
  • margin: 0 auto центрирует блок с шириной по горизонтали
  • Вертикальные margin между сложенными блоками могут схлопываться
  • Для одной стороны используйте длинные свойства
  • Padding — внутренний родственник — следующий урок

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
9
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок