Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: column-gap, Kategorien:  (allgemein), Multi-column Layout (CSS 3)

Spaltenabstand

Steuert den Abstand zwischen den einzelnen Spalten in einem mehrspaltigen Layout.

CSS-Eigenschaft: column-gap
KurzbeschreibungWerteStandardwertKategorieHinweis
Spaltenabstand
  • <length>
  • normal
normal
Allgemein:
dispay
CSS 3:
Multi-column Layout
Neu in CSS 3
 

Verwandte Eigenschaften aus der Kategorie:  (allgemein), Multi-column Layout (CSS 3):

Folgendes ist beim Einsatz von column-gap zu beachten:

  • column-gap steuert den Abstand zwischen den Spalten in einem mehrspaltigen Layout.
  • Der Standardwert ist normal. Das W3C schlägt 1em als Wert für normal vor, was von den Browsern auch so dargestellt wird. Ohne weitere Einstellungen sind das 16px, die meisten Browser haben dies als Voreinstellung. Hat man die Textgröße für den relevanten Bereich mit 20px angegeben, wird die Lücke mit einer Breite 20px dargestellt.
  • Werte können in PX, EM usw. angegeben werden. Negative Werte sind nicht zulässig und werden ignoriert.
  • column-gap ist gleichzeitig der Raum, in dem die Trennlinie column-rule dargestellt wird. Hier verhalten sich die Browser unterschiedlich. Firefox und Opera stellen die Trennlinie dar, auch wenn diese breiter als der Spaltenabstand ist. Die Linie überlagert sich dann potentiell mit dem Text beziehungsweise Inhalt der Spalten. Safari und Google Chrome stellen die Trennlinie nur dar, wenn der Spaltenabstand größer ist als die Dicke der Linie. Ist die Linie dicker, zeigen die Webkit-Browser die Trennlinie nicht an.
  • column-gap wird nur vom Opera vollständig unterstützt, Firefox, Safari und Chrome benötigen das Vendor-Präfix, Internet Explorer kennt mehrspaltiges Layout generell nicht.
Browserunterstützung von column-gap
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16
-moz-
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Hinweis

Eine umfassender Beitrag zu Multi-column Layout ist bei den Webkrauts zu finden: CSS3 im Praxistest: Multi-column Layout

Weiterführende Informationen zu column-gap:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    column-fill


Beispiele

HTML:

<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird. </p>

CSS:

p  {
   border: 1px solid #808080;
   column-count: 2;
   -moz-column-count: 2;
   -webkit-column-count: 2;
}
/* Ausgangssituation: Für Opera, Firefox, Safari und Chrome werden zwei Spalten definiert.
Standardwert ist normal, bzw. 1em, in diesem Fall 16px. */
Beispiel nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<p class="doGap">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll&shy;ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander&shy;hängende X keine reale Ausspielung erzeugt wird. </p>

CSS:

p.doGap  {
   column-gap: 100px;
   -moz-column-gap: 100px;
   -webkit-column-gap: 100px;
}
/* Spaltenabstand wird mit Ausnahme der IE von allen gängigen Browsern unterstützt. */
Beispiel nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvoll­ziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinander­hängende X keine reale Ausspielung erzeugt wird.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.074 sec.

Browser-Marktanteile