column-gap

Übersicht

Die CSS Eigenschaft column-gap bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.

Initialwertnormal
Anwendbar aufmulti-column elements, flex containers, grid containers
VererbtNein
Prozentwertebeziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();

Syntax

/* Schlüsselwortwert */
column-gap: normal; 

/* <length> Werte */
column-gap: 3px;
column-gap: 2.5em;

/* Globale Werte */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

Werte

normal
Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert 1em entsprechen.
<length>
Ein <length> Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, 0 ist jedoch zulässig.

Formale Syntax

normal | <length-percentage>
wobei 
<length-percentage> = <length> | <percentage>

Beispiel

.content-box {
  border: 10px solid #000000;
  column-count: 3;
  column-gap: 20px;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Multi-column Layout Module
Die Definition von 'column-gap' in dieser Spezifikation.		 Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

Support im Flex Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Flex LayoutChrome Vollständige Unterstützung 84Edge Vollständige Unterstützung 84Firefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Vollständige Unterstützung 70Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 84Chrome Android Vollständige Unterstützung 84Firefox Android Vollständige Unterstützung 63Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Support im Grid Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Grid LayoutChrome Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 16
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Firefox Vollständige Unterstützung 61
Vollständige Unterstützung 61
Vollständige Unterstützung 52
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53
Vollständige Unterstützung 53
Vollständige Unterstützung 44
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 10.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
WebView Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Chrome Android Vollständige Unterstützung 66
Vollständige Unterstützung 66
Vollständige Unterstützung 57
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Vollständige Unterstützung 61
Vollständige Unterstützung 61
Vollständige Unterstützung 52
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Keine Unterstützung 40 — 59
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 47
Vollständige Unterstützung 47
Vollständige Unterstützung 43
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 10.3
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap
Samsung Internet Android Vollständige Unterstützung 9.0
Vollständige Unterstützung 9.0
Vollständige Unterstützung 6.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-column-gap

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Support im Multi-column Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Multi-column LayoutChrome Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung 1.5 — 74
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 37
Vollständige Unterstützung 37
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 11.1 — 15
Safari Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 37
Vollständige Unterstützung 37
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 11.1 — 14
Safari iOS Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 5.0
Vollständige Unterstützung 5.0
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
calc() valuesChrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 61IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Firefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 47Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 9.0
<percentage> valuesChrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 61IE Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Firefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 47Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 9.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch