CSS-Eigenschaft border-spacing

.probe {
  border-spacing: 8px;
}

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'border-spacing'
<length> <length>? | inherit

<length>, <length>

Ein oder zwei Längenangaben. Sind zwei Werte angegeben, dann gilt der erste für den horizontalen und der zweite für den vertikalen Zellenabstand. Ist ein einzelner Wert gegeben, gilt er für beide Richtungen. Negative Werte sind nicht erlaubt.

Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.

Wichtig: der Ausgangswert für border-spacing ist '0'. Dennoch stellen fast alle modernen Browser die Zellen einer Tabelle mit ein oder zwei Pixeln Zwischenraum dar, wenn border-collapse: separate; deklariert ist. Nur wenn man border-spacing explizit mit '0' deklariert, werden die Rahmen benachbarter Zellen direkt neben einander gezeichnet.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

(Die Rahmen der einzelnen Zellen der Tabellen in den Screenshots wurden per Inline-Styles definiert.)

TABLE {
   border-collapse: separate;
   border-spacing: 10px;
   border: 2px outset #6699ee;
   }

TABLE {
   border-collapse: separate;
   border-spacing: 30px 10px;
   border: 2px outset #6699ee;
   }

Wechselwirkungen

border-collapse, empty-cells

Nur im Modell der getrennten Rahmen

Die Eigenschaft wirkt nur, wenn die Tabelle die Rahmen ihrer Zellen getrennt darstellt. Im anderen Modell fallen benachbarte Rahmen zu einem zusammen, und ein Abstand zwischen ihnen wäre ein Widerspruch; die Angabe wird dort ignoriert.

Zwei Werte trennen waagerechten und senkrechten Abstand, ein Wert gilt für beide. Der Abstand liegt zwischen den Rahmen der Zellen und zusätzlich zwischen den äußeren Zellen und dem Rahmen der Tabelle, sodass eine Tabelle mit Abstand ringsum eine Fassung bekommt.

Die Eigenschaft wird vererbt und gilt für die Tabelle, nicht für die Zelle. Sie an eine Zelle zu schreiben hat keine Wirkung; die Vererbung sorgt dafür, dass eine Angabe an einem umschließenden Element alle Tabellen darin erreicht.

Abstand, Innenabstand und Außenabstand

Drei Größen wirken an einer Tabellenzelle zusammen und werden leicht verwechselt. Der Innenabstand liegt zwischen Rahmen und Inhalt der Zelle. Diese Eigenschaft legt den Abstand zwischen den Zellen fest. Und Außenabstände gibt es an Tabellenzellen nicht: sie sind dort ohne Wirkung, weil das Tabellenmodell ihre Anordnung selbst bestimmt.

Das ist der Grund, warum sich Zellen ohne diese Eigenschaft nicht auseinanderrücken lassen. Wer es mit Außenabständen versucht, sieht keine Änderung und vermutet den Fehler an der falschen Stelle.

Zusammen mit der Wahl des Rahmenmodells ergibt sich daraus eine einfache Entscheidung: Sollen die Zellen einer Tabelle voneinander abgesetzt wirken, wird das getrennte Modell mit einem Abstand gewählt; soll die Tabelle ein zusammenhängendes Gitter sein, das zusammenfallende.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld nicht anwendbar. Die Eigenschaften border-collapse, border-spacing, caption-side und empty-cells sind nicht Teil des Standards 'CSS Mobile'.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert

0

Berechneter Wert

Zwei absolute Längenwerte

Vererbung

Ja

Anwendbarkeit

In Elementen, die als table- oder inline-table dargestellt werden.

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual