Модули в вёрстке обычно идут друг за другом и имеют внешние отступы. В ЦСС внешние отступы задают свойством margin:

.module {
  margin-left: 9px;
  margin-top: 18px;
  margin-bottom: 27px;
  margin-right: 9px;
}

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

Иногда в отступах нет системы, их задают так, как удобнее в конкретный момент для конкретного модуля. Один модуль может иметь отступы в одну сторону, другой — в другую, а то и сразу в несколько сторон:

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

.textBox {
  margin-top: 27px;
}
.textBox p {
  margin-top: 9px;
  margin-bottom: 9px;
}
.textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-left: 4.5px;
  margin-right: 4.5px;
}

Когда в отступах нет системы, вёрстку становится сложнее понимать, поддерживать и развивать. Работу кода трудно представить без подглядывания в браузер. Новые модули слипаются с существующими, приходится каждый раз подкручивать отступы, чтобы всё работало как надо. Начинается путаница, появляются баги.

Проще и надёжнее расставлять все отступы по одинаковым правилам.

Правило: слева направо, сверху вниз

Я советую всегда выстраивать модули слева направо и сверху вниз, а отступы задавать соответственно этим направлениям: все вертикальные отступы делать через нижний отступ, все горизонтальные — через правый отступ:

.textBox {
  margin-bottom: 27px;
}
.textBox p {
  margin-bottom: 9px;
}
.textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-right: 9px;
}

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

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

Отступы только для последних элементов

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

Обычно ненужные отступы последних модулей убирают в два шага. Сначала задают отступы для всех модулей, а затем обнуляют у последнего:

ul li {
  margin-bottom: 9px;
}
ul li:last-child {
  margin-bottom: 0;
}

Удобнее и проще использовать :not в комбинации с :last-child. Результат будет такой же, а кода станет меньше:

ul li:not(:last-child) {
  margin-bottom: 9px;
}

Исключения

Некоторым модулям удобнее задать отступы «против шерсти». Например, если модуль должен встраиваться в середину любой страницы, будет удобно задать ему отступы и сверху и снизу. Часто это бывает нужно для подзаголовков, банеров, перебивок и почтосборников.

Ещё одно исключение: если направление чтения сайта отличается от привычного. Тогда может быть удобнее изменить и направления построения вёрстки и отступов.

В целом, правило «слева направо, сверху вниз» можно использовать как «тупое правило» — то есть просто соблюдать всегда. Потому что когда вы столкнётесь с ситуацией‑исключением, то сами сразу это поймёте.


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

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