mozilla

Revision 20815 of border-spacing

  • Revision slug: CSS/border-spacing
  • Revision title: border-spacing
  • Revision id: 20815
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 37 words added

Revision Content

{{ CSSRef() }}

Summary

The border-spacing 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> <length> | inherit 

Values

<length>
A {{ Xref_csslength() }} to be used for both horizontal and vertical border spacing.
<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#space {
  border-collapse: separate;
  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

Browser Lowest Version
Internet Explorer 8.0
Firefox 1.0
Safari 1.0
Opera 4.0

See also

{{ CSS_Reference:Table_Properties() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> border-spacing </code>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 name="Syntax">Syntax</h3>
<pre>border-spacing: &lt;length&gt; | &lt;length&gt; &lt;length&gt; | inherit </pre>
<h3 name="Values">Values</h3>
<dl><dt>&lt;length&gt;</dt><dd> A {{ Xref_csslength() }} to be used for both horizontal and vertical border spacing.</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 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("border-spacing") }}</p>
<pre>table#space {
  border-collapse: separate;
  border-spacing: 10px 5px;
}
</pre>
<h3 name="Notes">Notes</h3>
<p>This property applies only when {{ Cssxref("border-collapse") }} is "separate".</p>
<p>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.</p>
<h3 name="Specifications">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 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0</td> </tr> <tr> <td>Firefox</td> <td>1.0</td> </tr> <tr> <td>Safari</td> <td>1.0</td> </tr> <tr> <td>Opera</td> <td>4.0</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Table_Properties() }}</p>
<p>{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}</p>
Revert to this revision