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