HTML | DOM 样式 borderSpacing 属性

介绍

borderSpacing 属性设置表格元素的单元格之间的空间（gutter）。该属性同时设置水平和垂直的间距。

该属性可用于

属性值

borderSpacing 属性的值可以是一个或两个长度值，用空格分隔，也可以是一个全局属性值（inherit）。

• 如果只有一个长度值，它将应用于水平和垂直间距。
• 如果有两个长度值，第一个值将应用于水平间距，第二个值将应用于垂直间距。

值可以使用任何 CSS 长度单位，如 px、em、rem 等。

示例

使用一个值

<table style="border-collapse: collapse; border-spacing: 10px;">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

该示例将表格的单元格间隔设置为 10 像素。

使用两个值

<table style="border-collapse: separate; border-spacing: 10px 5px;">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

该示例将表格的水平间距设置为 10 像素，垂直间距设置为 5 像素。

注意事项

• borderSpacing 属性只在 border-collapse 属性设置为 separate 时有效。
• 当使用 border-spacing 属性时，在单元格和边框间会创建间距，因此请勿在单元格和边框上添加其他间距。

参考文献

• W3Schools

以上内容参考自 HTML | DOM 样式 borderSpacing 属性，开发者可以在此基础上进行扩展和复用