边距间距

border-spacing CSS 属性设置 <table> 中相邻单元格边框之间的距离。此属性仅在 border-collapse 为 separate 时适用。

试试看

border-spacing 值也用于表格的外部边缘，其中表格边框与第一/最后一列或行的单元格之间的距离是相关（水平或垂直）border-spacing 与相关（顶部、右侧、底部或左侧）padding 在表格上的总和。

注意：border-spacing 属性等效于<table> 元素的已弃用cellspacing 属性，区别在于border-spacing 有一个可选的第二个值，可用于设置不同的水平和垂直间距。

语法

css
/* <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: revert-layer;
border-spacing: unset;

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

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

Values

<length>

间距的大小，以固定值表示。

正式定义

初始值0
应用于table 和 inline-table 元素
继承yes
计算值两个绝对长度
动画类型离散

正式语法

border-spacing = 
  <length>{1,2}

示例

Spacing and padding table cells

此示例在表格的单元格之间应用了.5em 的垂直间距和1em 的水平间距。请注意，在表格的外部边缘，表格的padding 值会加到其border-spacing 值上。

HTML

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

css
table {
  border-spacing: 1em 0.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

规范

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

浏览器兼容性

BCD tables only load in the browser

另请参阅