CSS border-spacing 屬性 · W3School CSS 參考手冊

# 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 屬性")