<p>Вибери потрібне значення для <code>column-rule-width</code>:</p>
<p>Ця властивість у багатоколонковому тексті задає ширину ліній між колонками. У цьому прикладі Ви побачите як на ширину меж впливає значення у пікселях.</p>
<input type="number" id="val" placeholder="число" value="1">
<hr>
<div id="block">
<p>За замовчуванням, ширина межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює ключовому слову <em>medium</em>.</p>
<p>Але ми можемо змінити це, оголовиши властивість <code>column-rule-width</code> та прописавши для неї потрібне значення: ключове слово або число (значення у пікселях).</p>
</div>
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: momospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
p {
margin-top: 0;
}
.inputs {
padding: 8px 16px;
font-size: 19px;
}
#block {
background: #f1f1f1;
padding: 10px;
transition: column-rule-width .15s ease-in;
-webkit-column-gap: 38px;
-moz-column-gap: 38px;
column-gap: 38px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
#text {
height: 60px;
background-color: #eee;
padding: 16px 0;
}
message {
display: none;
}
$('#val').on('change', function() {
$('#block').css('column-rule-width', $(this).val() + 'px');
});
This Pen doesn't use any external CSS resources.