CSS :: Свойство column-gap

css-свойство column-gap (от англ. column gap – интервал между колонками) задает расстояние между колонками в многоколоночном элементе.

Характеристики

Значение по умолчанию: normal.
Применяется: к многоколоночным элементам, flex-контейнерам, grid-контейнерам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.columnGap="value".

Синтаксис

column-gap: normal | <интервал>

Значения

normal – браузер будет устанавливать интервал между колонками автоматически.
интервал – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#cg

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-gap

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		height: 300px;
		margin: 1em;
		padding: 0.7em;
		border: 1px solid green;
		column-count: 3;
		}
		
		.p_1{column-gap: normal;}
		
		.p_2{column-gap: 5em;}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст		
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>

Пример №1