HTML and CSS Reference
In-Depth Information
border: 2px solid #000;
column-count: 5;
column-gap: 1.5em;
column-rule-color: #CCC;
column-rule-style: solid;
column-rule-width: 3em;
As Figure 18-7 shows, the rule extends underneath the columns.
Figure 18-7. The width of the rule doesn't increase the gap between columns
The purpose of this exaggerated example is to show that the widths of the gap and rule are independent of
each other.
WebKit-based browsers, such as safari and Chrome, don't display the rule if it's wider than the gap.
The styles in column-rule.html use the individual column rule properties, but the three values could be
combined using the column-rule shorthand property like this:
column-rule: #CCC solid 3em;
Spanning, Filling, and Breaking Columns
The remaining multi-column layout properties are described in Table 18-3 . They're concerned with spanning
child elements across multiple columns, controlling how columns are filled, and dealing with column breaks.
Search WWH ::

Custom Search