边框间距 | border-spacing

border-spacingCSS属性指定相邻的边之间的距离<table>的区块。此属性时才适用border-collapse的separate。

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

border-spacing值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距，是由表格相应的（水平的或垂直的） 边框间距和相应的（上，右，下或左）内边距之和。

注意：该border-spacing属性等效于弃用cellspacing <table>属性，不同之处在于它具有可以用来设定不同的水平和垂直间隔的可选的第二个值。

语法

该border-spacing属性可以被指定为一个或两个值。

• 当指定一个 <length>值时，它定义单元之间的水平和垂直间距。

• 当指定两个 <length>值时，第一个值定义单元之间的水平间隔（即，相邻列中的单元之间的间隔），第二个值定义单元之间的垂直间隔（即，相邻行之间的单元之间的间隔）。

值

<length>间距的大小为固定值。

形式语法

<length> <length>?

例

CSS

table {
  border-spacing: 5px 12px;
  padding: 0 8px 8px 0;
  border: 1px solid orange;
}

td {
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  text-align: center;
}

结果

规范

浏览器兼容性