Margin-bottom или margin-top

Margin-bottom или margin-top

От автора: я запостил в Twitter опрос, просто так. Контекст, в принципе, понятен, большинство CSS ботаников его поймут: «Что нужно использовать для вертикального отделения элементов друг от друга, margin-bottom на верхнем элементе или margin-top на нижнем?»

Margin-bottom или margin-top

61% из 2 000 проголосовавших выбрали margin-bottom. Я примерно так и предполагал, но не думал, что разрыв будет таким маленьким. Веб построен сверху вниз, и я бы сказал, что намного логичнее/естественнее применять отступ к первому элементу, чем ко второму.

Так или иначе, мы постоянно удаляем отступы либо с одной стороны, либо с другой. Вот так:

.module > *:last-child {
  margin-bottom: 0;
}

/* или */

.module > *:first-child {
  margin-top: 0;
}

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

Грег Витворт отметил, что по данным Bing разрыв между margin-top и margin-bottom очень маленький. Данные получены путем анализа 1 070 510 страниц.

Margin-bottom или margin-top

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree