border-spacing

版本：CSS2
媒体：视觉

语法：

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

默认值：0

适用于：table系元素

继承性：有

动画性：否

计算值：两个绝对长度值

取值：

<length>：: 用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值

说明：

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

该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
只有当表格边框独立（即 <' border-collapse '> 属性等于separate时）此属性才起作用。
如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
对应的脚本特性为borderSpacing。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-7.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
Basic Support	8.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS border-spacing_CSS参考手册_web前端开发参考手册系列_编程学问网</title>

<h1>相邻边被合并时border-spacing无效</h1>
<table border="1" class="test2">
<tbody>
	<tr>
		<td>合并边框</td>
		<td>合并边框</td>
		<td>合并边框</td>
	</tr>
	<tr>
		<td>合并边框</td>
		<td>合并边框</td>
		<td>合并边框</td>
	</tr>
</tbody>
</table>
<h1>边框独立时border-spacing生效（IE6/7 通过标签属性 cellspacing="20" 设置）</h1>
<table border="1" class="test3" cellspacing="20">
<tbody>
	<tr>
		<td>独立边框</td>
		<td>独立边框</td>
		<td>独立边框</td>
	</tr>
	<tr>
		<td>独立边框</td>
		<td>独立边框</td>
		<td>独立边框</td>
	</tr>
</tbody>
</table>
<p>IE6/7下通过标签属性 cellspacing="20" 替代 border-spacing:10px 20px; 设置单元格边距，可能你也注意到了 border-spacing 可以设置两个值，但是标签属性cellspacing只能设一个值，但通常情况下，我们最常用的是设置 cellspacing="0" 清除单元格边距。</p>
</body>
</html>