CSS/Eigenschaften/Textausrichtung/Spalten/column-gap

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft column-gap können Sie für ein mehrspaltig anzuzeigendes Element den Abstand zwischen den Spalten bestimmen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>column-gap</title>
    <style>
      .mehrspaltig {
        -webkit-column-count: 2;
        column-count:         2;

        -webkit-column-gap:   10em;
        column-gap:           10em;
      }
    </style>
  </head>
  <body>
    <h1>Spaltenlayout</h1>
    <article class="mehrspaltig">
      <h2>Allgemeines</h2>
      <p>...</p>
    </article>
  </body>
</html>
Zur Visualisierung sind die Kindelemente des article-Elements der Klasse „mehrspaltig“ mit einem Hintergrund versehen.

Mit column-gap legen Sie fest, wie groß der Abstand zwischen den Spalten sein soll. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) sowie der Wert auto. Letzterer ist die Voreinstellung und weist die Browser an, einen „vernünftigen“ Wert selbst zu wählen.

Beachten Sie: Die Flächen zwischen den Spalten sind immer transparent und lassen sich nicht gestalten.


Achtung!

Die Eigenschaft column-gap ist derzeit (Stand: Mai 2017) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-column-gap

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

siehe auch[Bearbeiten]