Односторонние отступы как средство от головной боли

Прекрасная статья от Harry Roberts csswizardry.com/2012/06/single-direction-margin-declarations/.

Суть идеи состоит в использовании односторонних вертикальных марджинов. Это создает аккуратный вертикальный ритм и позволяет менять элементы местами не опасаясь, что вертикальные отступы разной величины где-то схлопнутся непредсказуемым образом.

В качестве подопытного кролика возьмем такой макет:

Всем элементам шапки задан одинаковый отступ в одном направлении. В данном случае, вниз.

Вот код, управляющий отступами:

.header-item {
  margin-bottom: 1.2em;
  }
.header-item:last-child {
  margin-bottom: 0;
  }

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

Теперь можно сколько угодно менять местами элементы шапки, и всё равно все варианты будут аккуратно смотреться:

По-моему, идея гениальна в своей простоте.

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus