Столбец-правило - CSS-хитрости

Чтобы столбцы были различимы, вы можете добавить вертикальную линию между каждым столбцом. Линия находится в центре промежутка между колонками. Если вы когда-либо укладывали border, то вы готовы к стилю column-rule.

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

Свойство является сокращением для column-rule-width, column-rule-styleи column-rule-color, который является тем же шаблоном, что borderи принимает те же значения.

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthможет быть длиной like 3pxили значением ключевого слова like thin.

column-rule-styleможет быть любым из border-styleзначений , таких как solid, dottedи dashed.

column-rule-color может иметь любое значение цвета.

В отличие от column-gap, column-ruleне занимает места. Если column-rule-widthон толще, column-gapто правило будет расширяться под столбцами.

Вертикальное правило будет существовать только между столбцами с содержимым.