为何border-spacing无法为TABLE元素添加内边距？求解决方案

首先得澄清一个误区：你用的border-spacing属性是用来控制表格单元格之间的间距的，它并不会给<table>元素本身和父容器之间添加间距，这就是为什么你设置后看不到效果的原因。

接下来给你几个不用修改外层<div>的解决方案，你可以根据需求选择：

方案1：用margin实现表格与外层div的间距 #

这是最简单的方法，直接给表格设置上下margin，让它和外层div之间产生空白，外层div的背景色会自然显示在这个空白区域：

table {
  margin: 1.5em 0; /* 上下各1.5em间距，左右0 */
  /* 保留你原来的其他样式 */
  border-spacing: 0;
  border-collapse: separate;
}

方案2：用透明边框模拟内边距 #

如果希望这个“内边距”区域看起来像是表格自身的一部分（比如想给这个区域加和表格一样的背景），可以给表格设置透明的上下边框：

table {
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  background-clip: padding-box; /* 让背景色只填充到内容+padding区域，不延伸到透明边框 */
  /* 保留原有样式 */
  border-spacing: 0;
  border-collapse: separate;
}

如果需要这个透明边框区域显示表格的背景色，去掉background-clip即可。

方案3：用伪元素添加上下空白区域 #

这种方法可以更灵活地控制空白区域的样式，比如给空白加背景、阴影等：

table {
  position: relative;
  /* 保留原有样式 */
  border-spacing: 0;
  border-collapse: separate;
}

table::before, table::after {
  content: "";
  display: block;
  height: 1.5em; /* 空白高度 */
  width: 100%;
  /* 如果需要和表格同背景，就添加background-color: 你的表格背景色; */
}

这个方法的好处是不用改变表格本身的盒模型，空白区域完全由伪元素生成。

另外你提到“喜欢当前无……”的内容，上面的方案都不会破坏你现有的表格样式，放心用就行~

内容的提问来源于stack exchange，提问作者user7055375