Using CSS3 Multi-Column Layout - Beginning CSS3 - page 407

Table 18-2. Properties for Column Gaps and Rules

Property Initial Value Description

column-gap normal Accepts a length to set the gap between columns. The default

normal is browser-specific, but is generally 1em .

column-rule-color Sets the color of the vertical line (rule) between columns. If not

specified, the text color is used.

column-rule-style none Specifies the style of the rule between columns. Accepts the same

keywords as border-style .

column-rule-width medium Sets the width of the rule between columns. Accepts a length or

the keywords thin , medium , or thick .

column-rule 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:

#columns {
width: 980px;
padding: 10px;
margin: 0 auto;