Сегодняшний совет — особенный: я хочу поспорить с другим советчиком и поделиться альтернативной точкой зрения на управление отступами в ЦСС.

В своём совете Игорь Петров предлагает управлять вертикальными отступами, задавая только нижние отступы элементам:

/* Внутри текстовой полосы
   отступ после абзаца равен 36 пк,
   отступ после перечня равен 54 пк */
.textBox p {
  margin-bottom: 36px;
}
.textBox ul {
  margin-bottom: 54px;
}
Здесь и в примерах ниже мы считаем, что отступы элементов ранее были сброшены в ноль

По моему опыту, такая система вёрстки быстро обрастает исключениями. Представьте, что после картинок должен быть отступ в 72 пикселя, но подписи должны стоять на расстоянии в 18 пикселей. Приходится «подтягивать» подпись к картинке отрицательным отступом вверх:

.textBox img {
  margin-bottom: 72px;
}
.textBox img + .caption {
  margin-top: -54px;
}
Мы не только добавили исключение, изменив направление отступа, но и ввели магическую константу: почему именно 54, откуда взялось это число?

Мне кажется, что проблема не в направлении отступов, а в том, что мы делаем отступы свойством элемента, а не отношения между элементами. С элементом, компонентом или модулем, который управляет собственными отступами, тяжело работать: он никуда нормально не встаёт и не переносится, постоянно требует исключений.

Если запретить элементам контролировать отступы и начать задавать отступы отношениям между ними, код станет проще и нагляднее:

Можно смотреть на это как на полуапроши и кернинг. Полуапроши в буквах задают базовые отступы букв от любых соседних. Если грамотно их задать, если есть грамотная система, то буква будет хорошо смотреться рядом с большинством других.

Потом навешивается кернинг — особые отступы в конкретных отдельных парах, исключения.

/* Отступ по умолчанию.
   Что бы ни шло после картинки,
   отступ между ней и следующим элементом
   будет равен 72 пк */
.textBox img + * {
  margin-top: 72px;
}
/* Особый отступ в отдельной паре.
   Если после картинки идёт подпись,
   она получает уменьшенный отступ */
.textBox img + .caption {
  margin-top: 18px;
}
Последовательно задаём только верхние отступы, избавились от магических чисел

Можно смотреть на это как на полуапроши и кернинг. Полуапроши в буквах задают базовые отступы букв от любых соседних. Если грамотно их задать, если есть грамотная система, то буква будет хорошо смотреться рядом с большинством других.

Потом навешивается кернинг — особые отступы в конкретных отдельных парах, исключения.

Этот же подход работает и в случае, когда отступы явно задаются через специальный элемент‑обёртку, например, .rows или .stack:

Было
/* Элементы внутри .rows и .stack
   считаем «этажами», после которых
   идёт отступ в 72 пк */
.rows > *:not(:last-child) {
  margin-bottom: 72px;
}
/* Аналогичные стили, но с отменой
   отступа у последнего элемента */
.stack > * {
  margin-bottom: 72px;
}
.stack > *:last-child {
  margin-bottom: 0;
}
Стало
.rows > * + * {
  margin-top: 72px;
}
.stack > * + * {
  margin-top: 72px;
}

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы