---
title: border-spacing
slug: Web/CSS/border-spacing
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Referenz
  - CSS Tabellen
  - Referenz
translation_of: Web/CSS/border-spacing
---
<div>{{CSSRef}}</div>

<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>border-spacing</code></strong> legt die Abstände zwischen Tabellenzellen fest.<br>
 Die Eigenschaft hat nur dann Auswirkungen, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: separate</code></a> definiert ist.</p>

<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>



<p>Der Wert für <code>border-spacing </code>wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) <code>border-spacing</code> und des relevanten (oben, rechts, unten oder links) {{cssxref("padding")}} in der Tabelle ist.</p>

<p>value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) <code>border-spacing</code> and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.</p>

<div class="note">
<p><strong>Hinweis:</strong> Die <code>border-spacing</code> Eigenschaft entspricht demveraltetem <code>&lt;table&gt;</code> Attribut  <code>cellspacing</code>, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css no-line-numbers notranslate">/* &lt;length&gt; */
border-spacing: 2px;

/* horizontal &lt;length&gt; | vertical &lt;length&gt; */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;
</pre>

<p>Die Eigenschaft <code>border-spacing</code> kann entweder als ein oder zwei Werte angegeben werden.</p>

<ul>
 <li>Wenn <strong>ein</strong> <code>&lt;length&gt;</code> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.</li>
 <li>Wenn <strong>zwei</strong> <code>&lt;length&gt;</code> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).</li>
</ul>

<h3 id="Werte">Werte</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Die Größe des Abstands als fester Wert.</dd>
 <dt>{{cssxref("&lt;initial&gt;")}}</dt>
 <dd>Setzt den Standardwert für diese Eigenschaft</dd>
 <dt>{{cssxref("&lt;inherit&gt;")}}</dt>
 <dd>Diese Eigenschaft erbt den Wert von seinem Elternelement.</dd>
</dl>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Spacing_and_padding_table_cells" name="Spacing_and_padding_table_cells">Abstände und Padding von Tabellenzellen</h3>

<div class="translate-buttons">
<p>In diesem Beispiel wird ein Abstand von <code>.5em</code> vertikal und <code>1em</code> horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die <code>padding</code> Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten <code>border-spacing</code> addiert werden.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">table {
  border-spacing: 1em .5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>



<p>{{Compat("css.properties.border-spacing")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a>, <a href="/de/CSS/caption-side" title="de/CSS/caption-side"><code>caption-side</code></a>, <a href="/de/CSS/empty-cells" title="de/CSS/empty-cells"><code>empty-cells</code></a>, <a href="/de/CSS/table-layout" title="de/CSS/table-layout"><code>table-layout</code></a></li>
</ul>

<p>{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}</p>