border-spacing

  • Revision slug: CSS/border-spacing
  • Revision title: border-spacing
  • Revision id: 292686
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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.

The border-spacing 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) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This property applies only when {{ Cssxref("border-collapse") }} is separate.

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

Syntax

border-spacing: length              /* one-value syntax */
border-spacing: horizontal vertical /* two-value syntax */
border-spacing: inherit 

where:

length
Is a {{ xref_csslength() }} value that describes both the horizontal and vertical spacings between cells. It is used only in the one-value syntax.
horizontal
Is a {{ xref_csslength() }} value that describes the horizontal spacing between cells, that is the space between cells in adjacent columns. It is used only in the two-value syntax.
vertical
Is a {{ xref_csslength() }} value that describes the vertical spacing between cells, that is the space between cells in adjacent rows. It is used only in the two-value syntax.
inherit
Is a keyword indicating that the calculated value of border-spacing of the parent's element must be used.

Examples

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

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

Specifications

Specification Status Comment
CSS 2.1 {{ Spec2('CSS2.1') }}  

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

  • Table-related CSS properties: {{ CSS_Reference:Table_Properties() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<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 <code>cellspacing</code> attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.</p>
<p>The <code>border-spacing</code>&nbsp;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) border-spacing and the relevant (top, right, bottom, or left) padding on the table.</p>
<p>This property applies only when {{ Cssxref("border-collapse") }} is <code>separate</code>.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>0</code><br />
    In desktop browsers, like Firefox, the default value for HTML tables is <code>2px</code>.</li>
  <li><dfn>Applies to:</dfn> tables and inline-tables</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> two absolute lengths</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
border-spacing: <em>length</em>              <em>/* one-value syntax */</em>
border-spacing: <em>horizontal vertical</em> <em>/* two-value syntax */</em>
border-spacing: inherit 
</pre>
<p>where:</p>
<dl>
  <dt>
    <em>length</em></dt>
  <dd>
    Is a {{ xref_csslength() }} value that describes both the horizontal and vertical spacings between cells. It is used only in the one-value syntax.</dd>
  <dt>
    <em>horizontal</em></dt>
  <dd>
    Is a {{ xref_csslength() }} value that describes the horizontal spacing between cells, that is the space between cells in adjacent columns. It is used only in the two-value syntax.</dd>
  <dt>
    <em>vertical</em></dt>
  <dd>
    Is a {{ xref_csslength() }} value that describes the vertical spacing between cells, that is the space between cells in adjacent rows. It is used only in the two-value syntax.</dd>
  <dt>
    <code>inherit</code></dt>
  <dd>
    Is a keyword indicating that the calculated value of <code>border-spacing</code> of the parent's element must be used.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("border-spacing") }}</p>
<pre class="brush: css">
table { border-spacing: 10px 5px; }
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="http://www.w3.org/TR/CSS21/tables.html#separated-borders">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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&nbsp;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>
<h2 id="See_also">See also</h2>
<ul>
  <li>Table-related CSS properties: {{ CSS_Reference:Table_Properties() }}</li>
</ul>
Revert to this revision