border-spacing
Quick Summary for border-spacing
The border-spacing CSS property sets the distance between the borders of adjacent <table> cells. This property applies only when border-collapse is separate.
Code Usage for border-spacing
/* <length> */ border-spacing: 2px;  /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em;  /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: revert; border-spacing: unset; 
More Details for border-spacing

border-spacing

The border-spacing CSS property sets the distance between the borders of adjacent <table> cells. This property applies only when border-collapse is separate.

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.

Note: The border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing.

Syntax

/* <length> */ border-spacing: 2px;  /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em;  /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: revert; border-spacing: unset; 

The border-spacing property may be specified as either one or two values.

When one <length> value is specified, it defines both the horizontal and vertical spacings between cells. When two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).

Values

<length>

The size of the spacing as a fixed value.

Formal definition

Initial value0
Applies totable and inline-table elements
Inheritedyes
Computed valuetwo absolute lengths
Animation typediscrete

Formal syntax

<length> <length>?

Examples

Spacing and padding table cells

This example applies a spacing of .5em vertically and 1em horizontally between a table's cells. Note how, along its outside edges, the table's padding values are added to its border-spacing values.

HTML
<table>   <tr>     <td>1</td><td>2</td><td>3</td>   </tr>   <tr>     <td>4</td><td>5</td><td>6</td>   </tr>   <tr>     <td>7</td><td>8</td><td>9</td>   </tr> </table> 
CSS
table {   border-spacing: 1em .5em;   padding: 0 2em 1em 0;   border: 1px solid orange; }  td {   width: 1.5em;   height: 1.5em;   background: #d2d2d2;   text-align: center;   vertical-align: middle; } 
Result

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # separated-borders

See also

border-collapse, border-style The border-spacing property alters the appearance of the <table> HTML element.

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

@font-feature-values

The @font-feature-values CSS at-rule lets you use a common name in the font-variant-alternates property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.
@swash css reference