HTML & CSS Wiki

READ MORE

HTML & CSS Wiki

The border-spacing property is used in CSS and certain HTML elements. It specifies the distance between the borders of adjacent cells. 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. This property applies only when border-collapse is separate.


Values[]

  • <length> - A single value is for both horizontal and vertical border spacing. Ex. pt, px, etc.
  • <length> <length> - The first <length> gives the horizontal spacing (space between cells in adjacent columns) and the second <length> gives the vertical spacing (space between cells in adjacent rows). See above for length examples.


HTML example:

<table style="border-spacing:10px 5px; border-collapse:separate;">
<caption>Table</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1.1</td>
<td>2.2</td>
<td>3.3</td>
</tr>
</table>


CSS example:

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


See Also[]