Margin-bottom або margin-top

32

Від автора: я запостив в 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

Однак Естель Вейля також зауважила, що в отриманих даних люди в основному міняли ці значення, а не активно їх використовували. Було б цікаво поглянути на такі ж дані, але з ненульовими значеннями.