CSS border-spacing 属性

主题

定义和用法

border-spacing 是 CSS 中用于控制表格单元格之间间距的属性。

border-spacing 需要依赖border-collapse，必须设置border-collapse: separate才生效。

默认值：	2px
继承性：	支持
可动画性：	支持。请参阅：可动画属性。
版本：	CSS2
JavaScript 语法：	object.style.borderSpacing="15px"Demo ❯

下面通过一些示例，让你更直观地了解 border-spacing 属性的用法：

1. 默认间距 (2px)

border-collapse: separate;
/* 默认border-spacing为2px */

实例效果：

姓名	年龄	职业
张三	28	设计师
李四	32	工程师

2. 统一间距 (10px)

border-collapse: separate;
border-spacing: 10px;

实例效果：

姓名	年龄	职业
张三	28	设计师
李四	32	工程师

3. 不同水平(15px)垂直(5px)间距

border-collapse: separate;
border-spacing: 15px 5px;

实例效果：

产品	价格	库存
手机	¥2999	120
笔记本	¥5999	45

4. 大间距(20px)带背景色效果

border-collapse: separate;
border-spacing: 20px;
background-color: #e6f7ff;

实例效果：

城市	人口	特色
北京	2171万	首都
上海	2424万	金融中心

尝试一下 »

border-spacing: length|initial|inherit;

值	描述
`length`	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。