Revision 20820 of border-spacing

  • Revision slug: CSS/border-spacing
  • Revision title: border-spacing
  • Revision id: 20820
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added parenthetical WebKit to clarify what the second number is about.; 3 words added

Revision Content

{{ CSSRef() }}

Summary

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

  • {{ Xref_cssinitial() }}: 0
    Note: In desktop browsers like Firefox the default value for HTML tables is 2px.
  • Applies to: tables and inline-tables
  • {{ Xref_cssinherited() }}: Yes
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: two absolute lengths

Syntax

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

Values

Accepts one or two values.

<length>
A single value is for both horizontal and vertical border spacing. See {{ Xref_csslength() }} for possible units.
<length> <length>
The first {{ Xref_csslength() }} gives the horizontal spacing (space between cells in adjacent columns) and the second length gives the vertical spacing (space between cells in adjacent rows).

Examples

{{ CSSRefExampleLink("border-spacing") }}

table { border-spacing: 10px 5px; }

Notes

  • This property applies only when {{ Cssxref("border-collapse") }} is separate.
  • The border-spacing 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) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 8.0 4.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ CSS_Reference:Table_Properties() }}

{{ languages( { "de": "de/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> border-spacing </code>CSS property specifies the distance between the borders of adjacent cells (only for the <a href="/en/CSS/border-collapse" title="en/CSS/border-collapse">separated borders model</a>). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.</p>
<ul> <li>{{ Xref_cssinitial() }}: 0<br> Note: In desktop browsers like Firefox the default value for HTML tables is<code> 2px</code>.</li> <li>Applies to: tables and inline-tables</li> <li>{{ Xref_cssinherited() }}: Yes</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: two absolute lengths</li>
</ul>
<h3>Syntax</h3>
<pre>border-spacing: &lt;length&gt; &lt;length&gt;? | inherit </pre>
<h3>Values</h3>
<p>Accepts one or two values.</p>
<dl> <dt>&lt;length&gt;</dt> <dd>A single value is for both horizontal and vertical border spacing. See {{ Xref_csslength() }} for possible units.</dd> <dt>&lt;length&gt; &lt;length&gt;</dt> <dd>The first {{ Xref_csslength() }} gives the horizontal spacing (space between cells in adjacent columns) and the second length gives the vertical spacing (space between cells in adjacent rows).</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("border-spacing") }}</p>
<pre>table { border-spacing: 10px 5px; }
</pre>
<h3>Notes</h3>
<ul> <li>This property applies only when {{ Cssxref("border-collapse") }} is<code> separate</code>.</li> <li>The border-spacing 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) border-spacing and the relevant (top, right, bottom, or left) padding on the table.</li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1 Tables #border-spacing</a></li>
</ul>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>8.0</td> <td>4.0</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>See also</h3>
<p>{{ CSS_Reference:Table_Properties() }}</p>
<p>{{ languages( { "de": "de/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}</p>
Revert to this revision