Модули в вёрстке обычно идут друг за другом и имеют внешние отступы. В ЦСС внешние отступы задают свойством 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.