От автора: я запостил в Twitter опрос, просто так. Контекст, в принципе, понятен, большинство CSS ботаников его поймут: «Что нужно использовать для вертикального отделения элементов друг от друга, margin-bottom на верхнем элементе или margin-top на нижнем?»
61% из 2 000 проголосовавших выбрали margin-bottom. Я примерно так и предполагал, но не думал, что разрыв будет таким маленьким. Веб построен сверху вниз, и я бы сказал, что намного логичнее/естественнее применять отступ к первому элементу, чем ко второму.
Так или иначе, мы постоянно удаляем отступы либо с одной стороны, либо с другой. Вот так:
1 2 3 4 5 6 7 8 9 |
.module > *:last-child { margin-bottom: 0; } /* или */ .module > *:first-child { margin-top: 0; } |
Не старайтесь сильно вникнуть в этот текст. Со структурой, отступами, селекторами и всем остальным можно работать миллионами разных способов. Просто я хочу сказать, что это не имеет значения. Первый способ ничем не лучше второго. Способы не должны исключать друг друга, но не забывайте, как отступы схлопываются.
Грег Витворт отметил, что по данным Bing разрыв между margin-top и margin-bottom очень маленький. Данные получены путем анализа 1 070 510 страниц.
Однако Эстель Вейл также заметила, что в полученных данных люди в основном меняли эти значения, а не активно их использовали. Было бы интересно взглянуть на такие же данные, но с ненулевыми значениями.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.