Атрибут gap в CSS

  • Предыдущая страница font-weight
  • Следующая страница grid

Определение и использование

Атрибут gap определяет размер зазора между строками и столбцами в flexbox, сетке или многострочном макете. Это сокращение следующих свойств:

Внимание:Атрибут gap раньше назывался grid-gap.

Дополнительная информация:

CSS курс:CSS сетка

CSS курс:CSS гибкая рамка

CSS курс:CSS многострочный макет

CSS справочник:Атрибут row-gap

CSS справочник:Атрибут column-gap

Пример

Пример 1

Установить отступ между строками и столбцами 50px:

.grid-container {
  gap: 50px;
}

Попробуйте сами

Пример 2: макет сетки

В макете сетки установить отступ 20px между строками и 50px между столбцами:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Попробуйте сами

Пример 3: макет гибкой рамки

В макете гибкой рамки установить отступ 20px между строками и 70px между столбцами:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Попробуйте сами

Пример 4: многострочный макет

В многострочном макете установить間距 50px между столбцами:

#newspaper {
  columns: 3;
  gap: 50px;
}

Попробуйте сами

Синтаксис CSS

gap: row-gap column-gap|initial|inherit;
Значение Описание
row-gap Установить размер зазора между строками в сетке или гибкой рамке.
column-gap Установить размер зазора между столбцами в сетке, гибкой рамке或多иколонном макете.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Эта атрибут inherits от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: normal normal
Инheritance: Нет
Создание анимации: Поддерживается. См. отдельные атрибуты. См. также:Атрибуты, связанные с анимацией.
Версия: CSS Box Alignment Module Level 3
JavaScript синтаксис: object.style.gap="50px 100px"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Макет Chrome IE / Edge Firefox Safari Opera
В сетке 66 16 61 12 53
В гибкой рамке 84 84 63 14.1 70
В многострочных 66 16 61 Не поддерживается 53
  • Предыдущая страница font-weight
  • Следующая страница grid