Свойство column-gap задает расстояние между колонками в многоколоночном тексте. Значением свойства служат любые единицы для размеров либо ключевое слово normal (по умолчанию). При значении normal браузер сам подбирает оптимальное расстояние между колонками.
Синтаксис
селектор {
column-gap: значение;
}
Пример
В данном примере указано количество колонок column-count (3 штуки) и промежуток между ними column-gap в 50px. А ширина колонок автоматически подберется так, чтобы удовлетворить этим условиям (количеству колонок и расстоянию между ними):
<div id="elem">
некий длинный текст
</div>
#elem {
column-count: 3;
column-gap: 50px;
text-align: justify;
}
:
Пример . Значение normal
В данном примере указана ширина колонки column-width в 150px, их количество column-count стоит в значении auto, а промежуток column-gap между ними - в значении normal. Таким образом, браузер сам подберет необходимое количество колонок и промежуток между ними (но их ширина будет 150px):
<div id="elem">
некий длинный текст
</div>
#elem {
column-gap: normal;
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Смотрите также
-
свойство column-width,
которое задает ширину колонки -
свойство column-count,
которое задает количество колонок -
свойство column-rule,
которое задает границу между колонками -
свойство column-span,
которое задает количество столбцов, на которые должен растягиваться элемент -
свойство columns,
которое является свойством-сокращением для многоколоночности