column-gap
Укажите промежуток в 40 пикселей между столбцами в многоколоночном макете:
div
{
column-gap: 40px;
}
Попробуйте сами »
Определение column-gap
CSS свойство column-gap
определяет промежуток между столбцами в grid, flexbox или multi-column макете.
Примечание: Если есть column-rule
между столбцами он появится в середине промежутка.
Значение по умолчанию: | normal |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS Box Alignment Module Level 3 |
JavaScript синтаксис: | object.style.columnGap="50px" Попробуй |
Поддержка column-gap
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
column-gap (in Multiple Columns) | 50 | 10 | 52 | 10 | 37 |
column-gap (in Grid) | 66 | 16 | 61 | 12 | 53 |
column-gap (in Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
Синтаксис column-gap
column-gap: length|normal|initial|inherit;
Значения column-gap
Значение | Описание | Демонстрация |
---|---|---|
length | Указанная длина, которая задаст зазор между столбцами | Демо ❯ |
normal | Значение по умолчанию. Определяет обычный промежуток между столбцами. W3C предлагает значение 1em | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры column-gap
column-count: 3;
Разделите текст в элементе <div> на три столбца:
div
{
column-count: 3;
}
Попробуйте сами »
column-rule: 4px
Укажите ширину, стиль и цвет между столбцами:
div
{
column-rule: 4px double #ff00ff;
}
Попробуйте сами »
display: flex
Установите зазор между столбцами равным 30 пикселям в макете flexbox:
#flex-container {
display: flex;
column-gap: 30px;
}
Попробуйте сами »
display: grid
Установите зазор между столбцами равным 30 пикселям в макете сетки:
#grid-container {
display: grid;
column-gap: 30px;
}
Попробуйте сами »
Страницы по теме column-gap
CSS Учебник: CSS Несколько столбцов
CSS Учебник: CSS Flexbox макет
CSS Учебник: CSS Grid макет
CSS Справочник: row-gap свойство
CSS Справочник: gap свойство
HTML DOM справочник: columnGap свойство