As column boxes created inside multi-column (multicol) containers are anonymous boxes, styling individual columns is not possible, but we can style the gaps between the columns and the container in general. This guide explains how to change the gap and style rules between columns.
The gap between columns is controlled using the
gap property. The
column-gap property is defined in the multi-column layout module. The
gap property is defined in the box alignment module. This is a unified property to define gaps between boxes in all layouts that support gaps, including CSS grid layout and CSS flexible box layout.
The initial value of
1em, which prevents columns from running into each other. In other layout methods,
column-gap is supported as a synonym for
gap, but with an initial value of
0. The keyword value
column-gap to the initial value.
You can change the gap by using any
<length> value. In the example below, the
column-gap is set to
The allowed value for
column-gap is a
<length-percentage>, meaning percentages are allowed. Percentage values for
column-gap are calculated as a percentage of the width of the multicol container.
The specification defines
column-rule-color, providing a shorthand
column-rule. These properties work in exactly the same way as the
border properties: any
<line-style> can be used as a
column-rule-style, just as for valid
These properties are applied to the element, which is the multicol container, and therefore, all columns will have the same rule. Rules are only drawn between columns and not on the outer edges. Rules are also only drawn between columns that have content.
In this next example, a 5px-dotted rule with a color of
rebeccapurple has been created using the longhand values.
Note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. Instead, the rule overlays the gap.
The example below uses a very wide rule of
40px and a
10px gap. The rule displays under the column content. To make space on both sides of the rule, the gap would need to be increased to be larger than
This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container span across all columns.