The column-gap property controls the inline spacing inserted between adjacent columns in a multi-column formatting context. It determines the visual and spatial separation that browsers leave between the column boxes, so it directly affects how text and other content are perceived when they flow from one column to the next. In the modern CSS gap model, it corresponds to the inline-axis part of the two-axis gap system and is used alongside row-gap and the shorthand gap.

Because the space created by column-gap sits between column boxes rather than inside them, it reduces the amount of inline space available for each column’s content without altering the interior padding of a column. When you control column sizing with properties like column-width or column-count, the chosen gap contributes to the total horizontal space the columns occupy: the browser must accommodate the sum of column widths plus the gaps when laying out the multicol container. Depending on how columns are balanced (for example, influenced by column-fill), insufficient available width can change how many columns fit or cause overflow.

Visually, decorative lines drawn between columns via the column-rule mechanism are positioned relative to the gap area and interact with it; the rule typically sits within or across the gap so that the gap and rule together define the perceived separation between columns - see column-rule. The columns shorthand can set column count and width together with the gap conceptually in mind (see columns), but column-gap remains the dedicated control for that inline-space.

From a design and accessibility standpoint, adjusting column-gap is a key way to influence readability: modest gaps help guide the eye from one column to the next, while overly narrow gaps can cause visual clutter and overly wide gaps can fragment the reading flow. Note that this property pertains to the separation of column boxes themselves and does not change intra-column spacing like line-height or padding inside individual columns. In contexts beyond traditional multi-column layout, authors frequently use the axis-aware gap properties (and their shorthands) for spacing in grid and flex layouts as well, making it easier to manage both inline and block gaps consistently.