CSS参考手册
Miscellaneous Level 2
边框间距 | border-spacing
border-spacing
border-spacing
CSS属性指定相邻的边之间的距离<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>
属性,不同之处在于它具有可以用来设定不同的水平和垂直间隔的可选的第二个值。
Initial value |
0 |
---|---|
应用对象 |
table and inline-table elements |
是否可继承 |
yes |
媒体 |
visual |
计算值 |
two absolute lengths |
动画类型 |
discrete |
规范顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
该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;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Level 2 (Revision 1)The definition of 'border-spacing' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
8.0 |
4.0 |
1.0 (85) |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
1.0 (1.9.2) |
? |
? |
? |
Miscellaneous Level 2相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。