html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

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

Значения

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

Ссылки

Примеры

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