mozilla

Revision 20813 of border-spacing

  • Revision slug: CSS/border-spacing
  • Revision title: border-spacing
  • Revision id: 20813
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 21 words added, 12 words removed; page display name changed to 'border-spacing'

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.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: tables and inline-tables
  • {{ Xref_cssinherited() }}: Yes
  • 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.</p>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to: tables and inline-tables</li> <li>{{ Xref_cssinherited() }}: Yes</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>
<p> </p>
<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