column-rule-width

Хочется сделать линию между колонками пожирнее? Используйте это свойство!

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

Кратко

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

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

Как понять

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

Можно использовать любые единицы измерения, доступные в вебе, кроме процентов. По умолчанию установлено значение medium. Более подробно можно прочесть в описании border-width, ширина межколоночной линии описывается и вычисляется так же, как и ширина рамки.

Как пишется

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

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

        
          
          p {  column-count: 3;  column-rule: 2px;}
          p {
  column-count: 3;
  column-rule: 2px;
}

        
        
          
        
      

Также column-rule-width — это первое значение в свойстве column-rule.

Пример

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

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

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

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