🌐 Свой первый сайт Урок 9 из 16 · 0 из 16

Урок 9. Отступы: margin и padding

Самая частая путаница у новичков — margin и padding. Разберёмся раз и навсегда.

Каждый элемент на странице — это коробка. У коробки есть содержимое, стенки и пустое место снаружи.

padding — внутренний отступ. Расстояние от стенки коробки до содержимого. Как поролон внутри коробки с посудой;
border — сама стенка;
margin — внешний отступ. Расстояние от этой коробки до соседних. Как пустое место на полке между коробками.

Простое правило: если текст прижался к рамке — нужен padding. Если два блока прижались друг к другу — нужен margin.

Как записывать

.blok {
  padding: 20px;                /* со всех четырёх сторон */
  padding: 20px 40px;           /* сверху-снизу | слева-справа */
  padding: 10px 20px 30px 40px; /* верх | право | низ | лево, по часовой */
  margin-top: 24px;             /* только сверху */
}

Фокус, который знают все верстальщики

Чтобы блок встал ровно по центру страницы, ему задают ширину и margin со значением auto по бокам:

.blok {
  max-width: 600px;
  margin: 0 auto;
}

auto означает «браузер, посчитай сам» — и он делит свободное место поровну слева и справа.

Подсказка. Между /* и */ в CSS пишут комментарии — заметки для себя. Браузер их не читает. Очень удобно подписывать, что делает кусок кода.

Твой прогресс

Опыт и значки хранятся прямо в этом браузере — ни имени, ни почты для этого не нужно. Все треки и значки →

Частые вопросы

Чем margin отличается от padding?

padding — отступ внутри элемента, между рамкой и содержимым. margin — отступ снаружи, между этим элементом и соседними. Фон элемента закрашивает padding, но не margin.

Как выровнять блок по центру страницы в CSS?

Задать ему ограниченную ширину (max-width) и margin: 0 auto. Тогда браузер разделит оставшееся место поровну слева и справа.