row-gap
Свойство row-gap устанавливает интервал между строками элементов. Это достаточно универсальное свойство, которое может применяться в следующих ситуациях:
- задаёт промежуток между строк флекс-элементов;
- задаёт промежуток между строк грид-элементов.
В ранних версиях спецификации Grid Layout (вёрстка с помощью гридов) это свойство называлось grid-row-gap. Для совместимости браузеры продолжают поддерживать это свойство как псевдоним row-gap.
Краткая информация
Значение по умолчанию | normal |
---|---|
Наследуется | Нет |
Применяется | К флекс-контейнерам, грид-контейнерам |
Анимируется | Да |
Синтаксис
row-gap: <размер> | normal
Значения
- <размер>
- Значение ширины межстрочного интервала в единицах CSS (например, пикселях).
- normal
- Межстрочный интервал устанавливается браузером автоматически.
Песочница
1
2
3
div { display: flex; row-gap: 0px; }
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>row-gap</title> <style> .container { display: flex; /* Преобразуем во флексы */ flex-direction: column; /* Блоки располагаются по вертикали */ row-gap: 1em; /* Расстояние между блоками */ } .item { background-color: cadetblue; /* Цвет фона */ color: #fff; /* Цвет текста */ font-size: 3em; /* Размер шрифта */ text-align: center; /* Выравнивание по центру */ padding: 2rem; /* Расстояние от текста до края */ } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>
Объектная модель
Объект.style.rowGap
Спецификация
Спецификация | Статус |
---|---|
CSS Box Alignment Module Level 3 | Редакторский черновик |
CSS Grid Layout Module Level 2 | Редакторский черновик |
Браузеры
Вёрстка с помощью флексов | 84 | 84 | 70 | 14.1 | 63 | |||||
Вёрстка с помощью гридов | 16 | 57 | 66 | 44 | 53 | 10 | 12 | 52 | 61 |
Вёрстка с помощью флексов | 84 | 63 | 60 | 14.5 |
Вёрстка с помощью гридов | 66 | 61 | 47 | 12 |