Стовпець-правило - 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може мати довжину типу 3pxабо значення ключового слова, як thin.

column-rule-styleможе бути будь-яким з border-styleзначень , таких як solid, dottedі dashed.

column-rule-color може мати будь-яке значення кольору.

На відміну від цього column-gap, column-ruleне займає місця. Якщо значення column-rule-widthтовще ніж column-gapтоді, правило розширюватиметься під стовпцями.

Правило вертикалі існуватиме лише між стовпцями, що містять вміст.