css властивість column-gap


Властивість column-gap задає проміжок між стовпчиками.

Властивість `column-gap`

Під час роботи зі стовпчиками ви можете помітити, що між кожним стовпчиком є деяка відстань. Браузер встановлює цю відстань в 1em. Як правило, 1em - це зручна відстань для читання. Якщо ви виявили, що ця відстань занадто мала або занадто велика, ви можете встановити її за допомогою властивість column-gap.

Відстань між стовпчиками може бути більшою або рівною 0. Ця відстань може бути будь-якою CSS довжиною, окрім відсотків. Ви можете вказати, щоб проміжок між стовпчиками був нормальним (тобто normal) або певного розміру (наприклад, значення 30px встановить відстань між стовпчиками в 30 пікселів). Якщо вказати відстань між стовпчиками в відсотках - це значення буде проігноровано і відстань буде встановлено в значення без задання.

Пам'ятайте, що відстань між стовпчиками займає деякий простір і витискає вміст стовпчика на наступний розрив (стовпчик).

Нотатка:

Якщо встановлено column-rule - лінія з'явиться посередині проміжків.

Синтаксис

column-gap: length|normal|initial|inherit;

Властивість column-gap може отримувати 4 значення:

length

Визначає довжину проміжків між стовпцями.

normal

Визначає нормальний проміжок між колонками. W3C пропонує значення 1em. Значення без задання.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: normal
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.columnGap="50px"

Переглядачі

Переглядач
column-gap

1.0 -webkit-

10.0

1.5 -moz-

3.0 -webkit-

11.1

12.0

Переглядач
column-gap

1.0 -webkit-

1.0 -moz-

3.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

See the Pen veYVEP by Володимир (@NagarD) on CodePen.

Приклад використання

Проміжок між стовпчиками буде 40 пікселів.

div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; }

Додаткові посилання