column-gap

Springen zu:
  1. Übersicht
  2. Syntax
  3. Beispiel
  4. Spezifikationen
  5. Browser Kompatibilität
  6. Siehe auch

Ü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
Medienvisuell
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgenach Grammatik

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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome ? Edge ? Firefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera ? Safari Keine Unterstützung NeinWebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Support im Grid Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-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-gap
Vollständige Unterstützung 40
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Deaktiviert From version 40: 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-gap
Vollständige Unterstützung 28
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Vollständige Unterstützung 10.1
Alternativer Name
Vollständige Unterstützung 10.1
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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-gap
Vollständige Unterstützung 4.4
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Deaktiviert From version 4.4: this feature is behind the Enable experimental Web Platform features preference.
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-gap
Vollständige Unterstützung 29
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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 Mobile Keine Unterstützung NeinFirefox 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-gap
Vollständige Unterstützung 40
Alternativer Name Deaktiviert
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Deaktiviert From version 40: 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 53
Vollständige Unterstützung 53
Vollständige Unterstützung 44
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Safari iOS Vollständige Unterstützung 10.3
Alternativer Name
Vollständige Unterstützung 10.3
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-gap
Samsung Internet Android Vollständige Unterstützung 6.0
Alternativer Name
Vollständige Unterstützung 6.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: grid-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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 50
Vollständige Unterstützung 50
Vollständige Unterstützung Ja
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
Vollständige Unterstützung 1.5
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 Ja
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 Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Keine Unterstützung NeinFirefox 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 15
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 Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
<percentage> values
Experimentell
Chrome 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 66Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 53Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
calc() values
Experimentell
Chrome 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 66Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 53Safari 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
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, Sebastianz, Prinz_Rana, fscholz
Zuletzt aktualisiert von: SJW,