Template:Column-gap

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search
Template documentation[view] [edit] [history] [purge]

Usage[edit]

This template generates the equivalent of CSS3 style property column-gap [1]

On Webkit browsers (Safari, Chrome, Chromium), it uses the experimental property -webkit-column-gap.

On Mozilla browsers (Firefox), it uses the experimental property -moz-column-gap.

Use it in CSS style properties to set the minimum and maximum width of gaps between rendered columns of a multi-column parent element. Gaps will be split into two equal parts to generate additional right and left margins of the columns to separate respectively on the left and on the right.

Useful to separate columns of text, as it facilitates their reading on wide screens (a width of 1em is generally enough for the gap, and column widths between 18em for narrow lists of terms, and 36em for paragraphs will generally fit well). Gaps with the specified width will be created only between columns, but not to the left of the left-most column, and not to the right of the right-most column. You can safely avoid adding gaps if the content is already indented (such as ordered numbered lists, unordered bulleted lists, definition lists).

Example[edit]

  • {{column-gap|1em}} gives:
    -moz-column-gap:1em;-webkit-column-gap:1em;column-gap:1em;

References[edit]

  1. CSS Multi-column Layout Module, W3C specification.

See also[edit]