CSS/Properties/border-spacing

From Web Education Community Group
< CSS‎ | Properties
Revision as of 18:37, 21 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

border-spacing

The border-spacing property specifies the distance between the borders of adjacent cells.

Description

Values <length> | inherit
Initial value 0
Applies to 'table' and 'inline-table' elements
Inherited Yes


Values

  • <length>
    The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 table{
   border-width: 1px;
   border-style: solid;
   border-collapse: separate;
   width: 400px;
 }
 #one{
   border-spacing: 5px;
   margin-bottom: 20px;
 }
 #two{
   border-spacing: 5px 15px;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }

[index.html]

<body>
  <table id="one">
    <caption>Example 1. one length is specified</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
  <table id="two">
    <caption>Example 2. two lengths are specified</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
    <tr>
      <th>Applies to</th>
      <td>table-caption elements</td>
    </tr>
    <tr>
      <th>Inherited</th>
      <td>Yes</td>
    </tr>
  </table>
</body>

Csslist2 border-space.png

CSS Reference

The CSS specification defines the border-spacing property in 17.6.1 The separated borders model.