Вот и настало время для переосмысления подхода к верстке макетов. Давайте поговорим о CSS-свойстве margin-top. Уже много лет margin-top - один из основных элементов в наборе инструментов верстальщика. Но важно знать, что есть и более интересные способы управления пространством между блоками, позволяющие создавать понятный и удобный для дальнейшей работы код: margin-bottom и gap.

Почему не margin-top

Использование margin-top кажется интуитивно понятным. В конце концов, оно напрямую влияет на пространство над элементом. Однако, этот метод часто приводит к неожиданным результатам, особенно в сочетании со схлопывающимися полями или при реализации flexbox или grid моделей верстки. Схлопывающиеся поля часто формируют сложные для понимания интервалы, что затрудняет прогнозирование окончательного макета, а при работе с flex или grid контейнером margin-top может настолько разрушить последовательность элементов, что его будет трудно отладить.

Почему margin-bottom лучше

Переход на margin-bottom сохраняет последовательный и предсказуемый поток элементов. При использовании margin-bottom, интервал между текущим и следующим элементами становится легко объяснимым. Такой метод упрощает логику макета и не добавляет ненужных сложностей.

Например, рассмотрим вертикальный стек элементов. Используя margin-bottom, можно гарантировать, что каждый текущий элемент сдвинет следующий вниз, создавая единообразные интервалы во всём макете. Не нужно беспокоиться о том, как поля элемента будут взаимодействовать с родительскими контейнерами — все будет работать просто, именно так, как и ожидалось.

.element {
  margin-bottom: 20px;
}

gap

При работе с flexbox и grid макетами свойство gap меняет правила игры. Оно позволяет определять интервалы между элементами непосредственно внутри контейнера, не беспокоясь о стилях, написанных для отдельных элементов. Это не только упрощает CSS-код, но и повышает удобство дальнейшей работы с ним.

.container {
  display: flex;
  gap: 20px;
}

Пример

Представьте, что необходимо создать макет карты с несколькими элементами, расположенными вертикально. Традиционно, чтобы создать интервалы между элементами, можно использовать margin-top. Однако, margin-bottom или gap значительно упростят логику CSS и облегчат дальнейшую поддержку и масштабирование макета.

.card {
  margin-bottom: 30px;
}

.card-container {
  display: grid;
  gap: 30px;
}

Такой подход гарантирует равномерное размещение карточек и отсутствие необходимости беспокоиться о непредвиденном результате или схлопывании полей.

Заключение

Пришло время выйти за рамки привычного использования margin-top и обратить внимание на более эффективные и надежные методы формирования интервалов. margin-bottom и gap, создают более понятные, предсказуемые и управляемые макеты.

Каждый раз, собираясь применить привычный margin-top, остановитесь и подумайте - что лучше подойдет для ваших нужд: margin-bottom или gap.

Спасибо за внимание.

Перевод статьи Safdar Ali “Stop Using Margin-Top: Use Margin-Bottom and Gap Instead”