column-gap в CSS


Свойство CSS column-gap используется для указания расстояния между колонками (столбцами) многоколоночного элемента.

Тип свойства

Применяется: к незамещаемым элементам уровня блока (кроме и элементов с display: table ). К ячейкам таблиц — , и элементам с display: table-cell . А также к встроенным блокам — display: inline-block .


Значением свойства column-gap является один из следующих вариантов, указывающих расстояние между колонками.

  • normal — автоматическое вычисление расстояния исходя из настроек конкретного браузера. Спецификация предлагает разработчикам браузеров устанавливать 1em.
  • Размеры — цифра ноль (0) либо относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.

CSS | Свойство grid-column-gap

Свойство grid-column-gap в CSS используется для установки размера зазора между столбцами в макете сетки.


Стоимость недвижимости:

  • none: используется для установки для свойства grid-column-gap значения по умолчанию. Значение по умолчанию для grid-column-gap равно 0.
  • длина: размер зазора между столбцами дан в терминах длины. Значение длины может быть в форме pf px, em и т. Д. Значение должно быть неотрицательным.
  • initial: используется для установки для свойства grid-column-gap значения по умолчанию.
  • наследовать: это свойство наследуется от его родителя.

CSS3 column-gap Property


The column-gap CSS property specifies the gap between the columns in a multi-column element. If there is a column-rule between columns, it will appear in the middle of the gap.

The following table summarizes the usages context and the version history of this property.

Default value: normal
Applies to: Multi-column elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

column-gap : length | normal | initial | inherit

The example below shows the column-gap property in action.


Property Values

The following table describes the values of this property.

Value Description
length A length value defining the size of the gap between columns. It must not be negative, but may be equal to 0.
normal Indicating to use the browser-defined default spacing between the columns. The default value is 1em in most of the browsers.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-gap property.
Илон Маск рекомендует:  Картинка во фрейме

Browser Compatibility

The column-gap property is supported in all major modern browsers.

CSS свойство column-gap

Свойство column-gap определяет расстояние между колонками в многоколоночном тексте.

Если используется свойство column-rule — видимая граница между колонками, то она будет отображаться в середине интервала между колонками.

CSS синтаксис

Возможные значения

Значение Описание
расстояние Значение интервала между колонками в единицах CSS (например, пикселах).
normal Значение по умолчанию. Устанавливает стандартный интервал между колонками. W3C рекомендует значение 1em.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.


Устанавливаем между колонками отступ в 40px

CSS column-gap Свойство


Укажите зазор в 40 пикселей между столбцами:

Подробнее примеры ниже.

Определение и использование

Свойство column-gap указывает зазор между столбцами.

Примечание: Если между столбцами имеется правило столбца, оно будет отображаться в середине промежутка.

Значение по умолчанию: normal
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript:»50px»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

column-gap 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
3.1 -webkit-
15.0 -webkit

Синтаксис CSS

Значения свойств

Значение Описание
length Заданная длина, которая будет задавать зазор между столбцами
normal Значение по умолчанию. Задает нормальный зазор между столбцами. W3C предлагает значение 1em
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры


Разделите текст в элементе


Укажите ширину, стиль и цвет правила между столбцами:


Easily manage projects with

When working with columns, you might notice that between each column is a space, or gap. The browser sets the gap to 1em. Generally, 1em is a comfortable space between columns. If you find that the gap is too wide, or too narrow, you can adjust it with column-gap .

The value of column-gap can be normal or a length.

The value of normal is 1em. As mentioned, 1em is approximately the default gap length. If you find that 1em, or normal , is the right gap length for you, then you can save yourself a rule by not setting column-gap .

The length value must be greater than or equal to 0. The length can be any CSS unit except percent.

Keep in mind that column-gap takes up space and will push the column content to fit the gap.

CSS column-gap

The CSS column-gap property allows you to specify the size of the gap between columns in your multi-column layout.

You can specify your column gap to be normal (i.e. normal ) or to be a specific size (e.g., a value of 30px would create a column gap of 30 pixels).


Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

This example uses vendor prefixes for the multi-column layout due to lack of browser support for the official standard at the time of writing.

CSS Specifications

  • The column-gap property is defined in CSS Multi-column Layout Module (W3C Candidate Recommendation 12 April 2011).

Browser Support

The following table provided by shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS | column-gap Property

The column-gap property in CSS is used to specify the amount of gap between the columns in which a given text is divided using the column-count property.


Property Values:

  • length: This value specifies the length that will set the gap between the columns.
  • normal: This is the default value. This value is used to specify a normal gap between the columns.
  • initial: This value is used to set the column-gap property to it’s default value.
  • inherit: This value tells the column-gap property to inherit the property from its parent.

Columns gap

Customize the gap between the columns

Default gap #

Each column has a gap equal to the variable $column-gap , which has a default value of 0.75rem .
Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap , or 1.5rem by default.

Gapless #

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

You can combine it with the is-multiline modifier:

Variable gap #

You can specify a custom column gap by appending one of 9 modifiers on the .columns container.

  • is-0 will remove any gap (similar to is-gapless )
  • is-3 is the default value, equivalent to the 0.75rem value
  • is-8 is the maximum gap of 2rem

Additionally, .is-variable should be added on the .columns container.

CSS column-gap

The column-gap property is used to specify the size of gaps between columns in a multi-column layout.

Column gaps may result in reduction in column width depending on the available space and values given to the column-count and column-width properties.


normal : Specifies that the browser will determine column gap. This is the default value. A value of 1em is suggested by W3C.

: Specifies the size of gaps between columns in px, em, rem, pt, etc.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.


In the following demo, the number of columns into which the content of the paragraph is to be divided is set to 3. Since the column-gap property is set to normal , the column gap will depend upon the browser. Use the prefix -webkit-for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

If the gap between the columns is increased while keeping the number of columns constant, then the column width will decrease. The following demo shows the output when the column width is set to 40px.

See the Pen column-gap: 40px by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL