HTML and CSS Reference
Table 18-2. Properties for Column Gaps and Rules
Accepts a length to set the gap between columns. The default
normal is browser-specific, but is generally 1em .
Sets the color of the vertical line (rule) between columns. If not
specified, the text color is used.
Specifies the style of the rule between columns. Accepts the same
keywords as border-style .
Sets the width of the rule between columns. Accepts a length or
the keywords thin , medium , or thick .
Shorthand property for column-rule-color , column-rule-style ,
and column-rule-width . Omitted values are set to their default.
Changing the Width of the Gap
The column-gap property fixes the width of the gap between columns. The styles in column-gap.html set column-
gap to 3em . Figure 18-6 compares column-gap.html (top) with column-count.html (bottom), which uses the
default value. The larger gap doesn't increase the overall width of the multi-column element. Instead, the extra
space is created by reducing the width of the columns.
Figure 18-6. Increasing the gap between columns doesn't affect the overall width of the element
Adding a Vertical Rule Between Columns
The properties for column rules accept the same values as their equivalents for borders (see Chapter 9). The
column-rule-style property accepts any of the following keywords: none , hidden , dotted , dashed , solid ,
double , groove , ridge , inset , or outset .
The rule is drawn in the center of the gap, but it doesn't add to its width. The styles in column-rule.html
create a light gray rule that's twice the width of the column gap:
margin: 0 auto;