CSS-Eigenschaft: column-gap, Kategorien: (allgemein), Multi-column Layout (CSS 3)
Spaltenabstand
Steuert den Abstand zwischen den einzelnen Spalten in einem mehrspaltigen Layout.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Spaltenabstand |
| normal |
| 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.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS3 |
|
|
|
|
|
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:
- W3C Spezifikation:
http://www.w3.org/TR/css3-multicol/#column-gap0
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
column-fill - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
column-rule
Beispiele
HTML:
<p>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. </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 Nr. 1 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhä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­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. </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 Nr. 2 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhä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!