W3docs
de
Anmelden

CSS border-spacing Eigenschaft

border-spacing ist eine CSS-Eigenschaft, die den Abstand zwischen benachbarten Zellen festlegt. Hier finden Sie Beispiele.

Die CSS-Eigenschaft border-spacing legt den Abstand zwischen den Rahmen benachbarter Tabellenzellen fest. Sie ist das CSS-Äquivalent des alten HTML-Attributs cellspacing, bietet jedoch mehr Kontrolle: Horizontale und vertikale Abstände können unabhängig voneinander festgelegt werden.

Diese Seite erklärt, was border-spacing bewirkt, wann es tatsächlich wirksam ist, welche Werte es akzeptiert und zeigt mehrere ausführbare Beispiele.

Wann border-spacing angewendet wird

border-spacing funktioniert nur im Modell mit getrennten Rahmen — das heißt, wenn border-collapse auf separate gesetzt ist (der Standardwert). In diesem Modell behält jede Zelle ihren eigenen Rahmen, sodass zwischen den Zellen ein echter Abstand entsteht, den die Eigenschaft steuern kann.

Wenn Sie zum kollabierenden Modell wechseln (border-collapse: collapse), werden benachbarte Rahmen zu einem einzigen gemeinsamen Rahmen zusammengeführt und es gibt keinen Abstand zum Bemessen — border-spacing wird daher ignoriert. Wenn der Abstand scheinbar keine Wirkung hat, prüfen Sie, ob border-collapse nicht auf collapse gesetzt ist.

Werte und Syntax

border-spacing akzeptiert einen oder zwei Längenwerte:

  • Ein Wert — wendet denselben Abstand horizontal und vertikal an (z. B. border-spacing: 20px).
  • Zwei Werte — der erste Wert legt den horizontalen Abstand fest, der zweite den vertikalen (z. B. border-spacing: 20px 30px).

Als Längenangaben können beliebige CSS-Einheiten verwendet werden (px, em, rem usw.). Negative Werte sind nicht erlaubt und Prozentwerte werden nicht akzeptiert.

Anfangswert0
Gilt fürDie Tabelle und Inline-Tabellenelemente.
VererbtNein
AnimierbarJa. Der Abstandswert ist animierbar.
VersionCSS2
DOM Syntaxobject.style.borderSpacing = "10px";

Syntax

Syntax der CSS-Eigenschaft border-spacing

border-spacing: length | initial | inherit;

Beispiel der border-spacing-Eigenschaft mit einem Wert:

Beispiel der CSS-Eigenschaft border-spacing mit nur einem Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Example of border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

Ergebnis

Eine zweispaltige Tabelle mit 20px Abstand um jede Zelle

Hier ist ein weiteres Beispiel mit zwei Werten. Der erste Wert legt den horizontalen Abstand fest, der zweite den vertikalen — der Abstand zwischen Spalten unterscheidet sich also vom Abstand zwischen Zeilen.

Beispiel der border-spacing-Eigenschaft mit zwei Werten:

Beispiel der CSS-Eigenschaft border-spacing mit zwei Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Probier es selbst »

Jetzt fügen wir dem obigen Tabellenbeispiel etwas Styling hinzu. Zum Beispiel können wir background-color hinzufügen, das die Hintergrundfarbe eines Elements festlegt.

Beispiel der Verwendung von border-spacing zusammen mit der background-color-Eigenschaft:

Beispiel der CSS-Eigenschaft border-spacing mit der background-color-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      .table {
        border-collapse: separate;
        border-spacing: 20px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>Example of border-spacing: 20px;</h1>
    <table class="table">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
lengthGibt den Abstand zwischen Zellen in px, em usw. an.Ausprobieren »
initialSetzt diese Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt diese Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

  • border-collapse — legt fest, ob Zellrahmen getrennt sind (sodass border-spacing wirkt) oder zusammenfallen.
  • empty-cells — steuert, ob Rahmen und Hintergründe um leere Zellen im getrennten Modell gezeichnet werden.
  • border-color — legt die Farbe der Zellrahmen fest, die border-spacing auseinanderzieht.
  • HTML tables — das Markup, auf das diese Stile angewendet werden.

Übung

Übung
Was ist die Funktion der 'border-spacing'-Eigenschaft in CSS?
Was ist die Funktion der 'border-spacing'-Eigenschaft in CSS?
Was this page helpful?