-webkit-column-gap

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
	1.0+		3.1+

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	К блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block
Процентная запись	Неприменима

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Задает расстояние между колонками в многоколоночном тексте.

Синтаксис

-webkit-column-gap: <значение> | normal

Значения

<значение>: Значение ширины межколоночного интервала в единицах CSS (например, пикселах).
normal: Межколоночный интервал устанавливается браузером. По умолчанию используется значение 1em.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-column-gap</title>
  <style>
   .book {
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
   }
  </style>
 </head>
 <body>
  <div class="book">
<p>1. Lorem ipsum dolor sit amet consectetuer rutrum Aliquam et Maecenas
malesuada. Sem vitae tempus Curabitur condimentum velit pellentesque 
nibh mauris et Vivamus. Curabitur pede vitae vitae mollis mauris 
elit justo mauris Vestibulum interdum. Feugiat Ut condimentum 
tincidunt Maecenas mauris sodales eleifend Mauris sapien felis. 
Auctor elit penatibus convallis.</p>
<p>2. Curabitur pulvinar pretium adipiscing Pellentesque Curabitur nonummy 
quis ipsum porttitor Sed. In Ut ipsum a Pellentesque eu Nam Nam rutrum 
dignissim faucibus. Nec consectetuer aliquet convallis ipsum ipsum 
tempor sapien Quisque nibh interdum. Nam pede et consectetuer Lorem 
convallis et turpis dolor fringilla Vestibulum. Sed orci et Vestibulum 
leo adipiscing justo Quisque Vestibulum urna risus.</p>
<p>3. Sed Cum In enim Ut dolor justo dolor enim wisi orci. Convallis 
enim a in justo et orci dolor Curabitur quis eget. Nulla justo semper 
scelerisque semper dictumst et interdum eu quis eget. Laoreet leo porta 
Cras et id eros felis metus et dictumst. Eu ac facilisi tincidunt dui 
Nam Quisque consectetuer fermentum leo fames.</p>
</div>
 </body>
</html>

Результат примера показан на рис. 1.

Две колонки текста

Рис. 1. Две колонки текста