border-spacing

border-spacing 属性指定相邻单元格边框之间的距离(只适用于边框分离模式)。相当于 HTML 中的 cellspacing 属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

  • border-spacing 值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的)边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。
  • 该属性只适用于 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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE8以上版本的浏览器都支持 border-spacing

语法:

border-spacing <length> | <horizontal> <vertical> | inherit

取值:

  • <length> :用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值。
  • <horizontal> :描述相邻两列的单元格之间的水平距离的一个 <length> 值。它只在双值语法下使用。
  • <vertical> :描述相邻两行的单元格之间的垂直距离的一个 <length> 值。它只在双值语法下使用。
  • inherit :一个表示父元素的 border-spacing 的计算值的关键字,其父元素必须应用了 border-spacing 。

说明:

设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距

  • 该属性作用等同于 标签属性cellspacing (单元格边距)。border-spacing:0等同于cellspacing="0"
  • 只有当表格边框独立(即 border-collapse:separate 时)此属性才起作用。
  • 如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。
  • 如果只提供一个length值时,这个值将作用于横向和纵向上的间距。
  • 对应的脚本特性为 borderSpacing
默认值 0
适用于 table系元素
继承性
动画性
计算值 两个绝对长度值