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

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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

length

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

автор: Svitlana

правити

normal

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-gap	1.0 -webkit-	1.5 -moz-	3.0 -webkit-	11.1	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
column-gap	1.0 -webkit-	1.0 -moz-	3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

.cols {
    column-count: 3;
    column-gap: 40px;
}