column-rule

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство column-rule отвечает за внешний вид линии между колонками в многоколоночной вёрстке.

Как понять

Секция статьи "Как понять"

Свойство column-rule является шорткатом для свойств:

Можно писать значения в любом порядке, разделяя пробелами, браузер сам поймёт, что мы от него хотим. Но общепринятым форматом является вид «ширина → стиль → цвет»‎: column-rule-widthcolumn-rule-stylecolumn-rule-color. Можно не указывать ширину и цвет, но стиль линии указывается обязательно – у column-rule-style нет значения по умолчанию и браузер не поймёт, какую линию нужно нарисовать.

Как пишется

Секция статьи "Как пишется"

Для того, чтобы задать между колонками красную пунктирную линию шириной 2 px, мы напишем:

        
          
          p {  column-rule: 2px dashed red;}
          p {
  column-rule: 2px dashed red;
}

        
        
          
        
      

Прослеживается сходство со свойством border. Действительно, межколоночная линия описывается так же, как и рамка.

Пример

Секция статьи "Пример"

В примере ниже вы можете поменять внешний вид у линии между колонками. По умолчанию заданы такие стили:

        
          
          .text-wrapper {  column-count: 3;  column-rule: 3px solid red;  column-gap: 25px;}
          .text-wrapper {
  column-count: 3;
  column-rule: 3px solid red;
  column-gap: 25px;
}

        
        
          
        
      
Открыть демо в новой вкладке