CSS中的border-spacing属性详解

一、属性描述
border-spacing是CSS表格布局中的一个重要属性，专门用于控制相邻表格单元格之间的间距。它只对display: table或display: inline-table的元素有效，并且需要将border-collapse设置为separate（默认值）时才生效。

二、属性语法

border-spacing: length | initial | inherit;

• 可以接受1-2个长度值（如px、em、rem等）
• 单值：同时设置水平和垂直间距
• 双值：第一个为水平间距，第二个为垂直间距

三、属性详解

步骤1：基本使用
当需要创建类似"单元格间距"效果时，border-spacing是最佳选择：

.table {
  display: table;
  border-collapse: separate; /* 必须设置为separate */
  border-spacing: 10px; /* 所有方向10px间距 */
}

步骤2：不同方向的间距控制
通过双值语法可以分别控制水平和垂直间距：

.table {
  border-spacing: 15px 5px; /* 水平15px，垂直5px */
}

步骤3：与border-collapse的关系
border-spacing只在border-collapse: separate时生效：

.table-separate {
  border-collapse: separate;
  border-spacing: 10px; /* 生效 */
}

.table-collapse {
  border-collapse: collapse;
  border-spacing: 10px; /* 无效 */
}

步骤4：实际应用示例

<style>
  .pricing-table {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 10px;
    margin: 20px;
  }
  
  .pricing-row {
    display: table-row;
  }
  
  .pricing-cell {
    display: table-cell;
    padding: 15px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="pricing-table">
  <div class="pricing-row">
    <div class="pricing-cell">基础版</div>
    <div class="pricing-cell">标准版</div>
    <div class="pricing-cell">专业版</div>
  </div>
</div>

步骤5：与HTML table元素的对比
border-spacing可以替代HTML中过时的cellspacing属性：

<!-- 过时的方法 -->
<table cellspacing="10">
  <!-- 表格内容 -->
</table>

<!-- 现代CSS方法 -->
<table style="border-collapse: separate; border-spacing: 10px;">
  <!-- 表格内容 -->
</table>

四、注意事项

1. border-spacing创建的是单元格之间的"空隙"，不会影响表格的外边距
2. 间距区域是透明的，会显示表格容器的背景色
3. 不支持负值
4. 在折叠边框模式下（border-collapse: collapse）会被忽略

五、浏览器兼容性
border-spacing得到所有现代浏览器的良好支持，包括IE8+，是创建表格间距的安全选择。