Укажите промежуток в 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 свойство