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;
}

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


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

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

Грег Витворт отметил, что по данным 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