Свойство column-gap

Свойство 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,
которое является свойством-сокращением для многоколоночности