column-gap
Свойство CSS column-gap задаёт отступ (en-US) между колонками.
Интерактивный пример
Изначально свойство появилось в многоколоночной раскладке (en-US) . Позже оно перекочевало в другие методы раскладки, и теперь column-gap определено в спецификации Box Alignment. А значит может использоваться в многоколоночной, флексбокс- и грид-раскладках.
Обратите внимание, что grid-column-gap является псевдонимом для этого свойства.
Синтаксис
/* Keyword value */ column-gap: normal; /* values */ column-gap: 3px; column-gap: 2.5em; /* value */ column-gap: 3%; /* Global values */ column-gap: inherit; column-gap: initial; column-gap: revert; column-gap: revert-layer; column-gap: unset;
Свойство column-gap может быть задано одним из значений, перечисленных ниже.
Значения
Между колонками используется стандартное расстояние, определённое браузером. В случае многоколоночной раскладки это будет 1em . Для всех остальных типов раскладки это значение равно нулю.
Размер промежутка между колонками, определяемое единицам измерения длины . Значение должно быть положительным.
Размер промежутка между колонками, указанный в процентах . Значение должно быть положительным.
Формальное определение
| Начальное значение | normal |
|---|---|
| Применяется к | multi-column elements, flex containers, grid containers |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | as specified, with s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | длина, проценты или calc(); |
Формальный синтаксис
column-gap =
normal | (en-US)
=
| (en-US)
gap (grid-gap)
Свойство gap CSS задаёт отступы (en-US) между колонками и рядами. Является сокращением для свойств row-gap и column-gap .
Интерактивный пример
Обратите внимание, что grid-gap является псевдонимом для этого свойства.
Синтаксис
/* One value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* One value */ gap: 16%; gap: 100%; /* Two values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* One or two values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* Global values */ gap: inherit; gap: initial; gap: revert; gap: revert-layer; gap: unset;
Свойство задаёт значение для , за которым может следовать значение для . Если опущено, то оно устанавливается в то же значение, что и .
Значения
Размер отступа, разделяющего линии сетки.
Размер отступа, разделяющего линии сетки, относительно размера грид-элемента.
Формальное определение
- row-gap : normal
- column-gap : normal
- row-gap : as specified, with s made absolute, and normal computing to zero except on multi-column elements
- column-gap : as specified, with s made absolute, and normal computing to zero except on multi-column elements
- row-gap : длина, проценты или calc();
- column-gap : длина, проценты или calc();
column-gap¶
Свойство column-gap задаёт расстояние между колонками в многоколоночном тексте.
Демо¶
Flexbox и выравнивание
Колонки и таблицы
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
- vertical-align
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/* Keyword value */ column-gap: normal; /* values */ column-gap: 3px; column-gap: 2.5em; /* value */ column-gap: 3%; /* Global values */ column-gap: inherit; column-gap: initial; column-gap: unset; Значения¶
Значение по-умолчанию: normal
Применяется к: колонкам, флексам, гридам
Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
Межколоночный интервал устанавливается браузером.
Спецификации¶
- CSS Box Alignment Module Level 3
- CSS Grid Layout
- CSS Multi-column Layout Module
Примечания¶
Firefox поддерживает свойство -moz-column-gap .
Safari, Chrome и Аndroid поддерживают свойство -webkit-column-gap .
Поддержка браузерами¶
Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.
column-gap
CSS свойство column-gap определяет расстояние между колонками.
Если используется свойство column-rule — видимая граница между колонками, она будет отображаться в середине расстояния между колонками.
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | к многоколоночным элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.columnGap=»40px» |
Синтаксис
column-gap: расстояние|normal|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| расстояние | Расстояние между колонками указывается в единицах измерения CSS. |
| normal | Указывает стандартный интервал между колонками. W3C предполагает значение 1em. |
Пример
CSS Свойство:
Стандарт CSS3 еще не принят, но многие полезные свойства уже поддерживаются большинством браузеров. Из новых свойств стоит прежде всего обратить внимание на box-shadow и text-shadow, который позволяют добавлять различные по виду и расположению тени, как к тексту, так и к элементам, например можно сделать меню, отбрасывающую легкую тень, для придания объемного вида. Еще одно из свойств предназначено для работы с текстом — column, он позволяет делить текст на колонки, задавать ширину для них, управлять расстоянием между колонками и выбирать стиль, ширину и цвет для границ между ними.