Справочник HTML & CSS

gap

Промежутки между элементами во flexbox и grid.

Синтаксис

gap: row-gap column-gap;

Значения

Параметр	Тип	Описание
one value	length	Одинаковый промежуток между рядами и колонками: `16px`.
two values	length	Между рядами, затем между колонками: `24px 8px`.

Примеры

Промежутки между элементами в ряду:

<style>
  .row { display: flex; gap: 16px; }
  .row div { padding: 8px; background: lightskyblue; }
</style>
 
<div class="row"><div>One</div><div>Two</div><div>Three</div></div>

Разные промежутки между рядами и колонками:

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 8px; }
  .grid div { padding: 8px; background: palegreen; }
</style>
 
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>

Примечания

gap добавляет место только между элементами, а не у краёв контейнера, — в отличие от margin у каждого элемента, у последнего ничего убирать не нужно. Отдельные свойства — row-gap и column-gap.

См. также

margin — Внешний отступ элемента — расстояние до соседей.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
grid-template-columns — Количество и ширина колонок сетки.

Вопросы и ответы по теме

В учебнике

Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.

Спасибо, что читаете!

gap