💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# CSS border-spacing 属性 ## 实例 为表格设置 border-spacing: ``` table { border-collapse:separate; border-spacing:10px 50px; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流浏览器都支持 border-spacing 属性。 注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。 ## 定义和用法 border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。 注释:某些版本的IE浏览器不支持此属性。 ### 说明 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。 | 默认值: | _not specified_ | | --- | --- | | 继承性: | yes | | --- | --- | | 版本: | CSS2 | | --- | --- | | JavaScript 语法: | _object_.style.borderSpacing="15px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _length length_ | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 _length_ 参数,那么定义的是水平和垂直间距。 如果定义两个 _length_ 参数,那么第一个设置水平间距,而第二个设置垂直间距。 | | inherit | 规定应该从父元素继承 border-spacing 属性的值。 | ## TIY 实例 [设置表格边框之间的空白](/tiy/t.asp?f=csse_table_border-spacing) 本例演示如何设置单元格边框之间的距离。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> table.one { border-collapse: separate; border-spacing: 10px } table.two { border-collapse: separate; border-spacing: 10px 50px } </style> </head> <body> <table class="one" border="1"> <tr> <td>Adams</td> <td>John</td> </tr> <tr> <td>Bush</td> <td>George</td> </tr> </table> <br /> <table class="two" border="1"> <tr> <td>Carter</td> <td>Thomas</td> </tr> <tr> <td>Gates</td> <td>Bill</td> </tr> </table> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。</p> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 表格](/css/css_table.asp "CSS 表格") HTML DOM 参考手册:[borderSpacing 属性](/jsref/prop_style_borderspacing.asp "HTML DOM borderSpacing 属性")