Справочник CSS

Gap: расстояние между элементами

gap задаёт промежуток внутри flex- или grid-контейнера. В отличие от margin, он появляется только между соседними элементами.

Синтаксис

.cards { display: grid; gap: 24px; }
.menu { display: flex; gap: 8px 20px; }

Одно значение задаёт одинаковый промежуток. Два значения — сначала между строками, затем между колонками.

Отдельные направления

.grid { row-gap: 24px; column-gap: 16px; }

Единицы

Обычно используют px, rem или адаптивный clamp(). Проценты в gap могут вести себя неожиданно, если размер контейнера не определён.

Ошибки

Gap задан обычному block-контейнеру.
Одновременно используются gap и внешние margin у всех детей.
Слишком большой промежуток ломает узкий экран.

Попробуй

Создай переносимое flex-меню с горизонтальным gap 20px и вертикальным 10px.

Когда gap удобнее внешних отступов

gap задаёт расстояние только между элементами Grid или Flex-контейнера. У первого и последнего элемента не появляется лишний внешний отступ, поэтому компонент проще переиспользовать. Одно значение задаёт интервалы по обеим осям, два — сначала между строками, затем между колонками.

В Flexbox направление зависит от flex-direction, поэтому row-gap и column-gap лучше проверять визуально. Margin всё ещё нужен, когда отступ относится к самому элементу, а не к группе соседей. Не смешивай gap и одинаковые margin у дочерних элементов без причины — расстояния могут неожиданно сложиться.

Разберём рабочий пример

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 16px;
}

.actions { display: flex; gap: 8px; }

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

Проверка перед использованием

gap объявлен у контейнера.
Понятно, какая ось считается строкой и колонкой.
Нет дублирующих margin у дочерних элементов.
Интервалы проверены при переносе строк.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.