边框间距 | border-spacing
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>属性，不同之处在于它具有可以用来设定不同的水平和垂直间隔的可选的第二个值。
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) | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
