如何在flex/table布局父div中给子div留间距并保持等高

我来帮你搞定这两种等高布局下的间距问题，还有你提到的“背景移到内部div但保持等高”的需求，不用修改宽度也能完美解决～

Flex布局下添加子元素间距的方法 #

Flex布局有专门的gap属性来设置项目之间的间距，这比用margin更可靠，不会出现margin折叠或者溢出容器的问题。你只需要给父容器添加gap，再调整子元素的宽度分配方式即可：

修改后的CSS代码：

.full_100{ 
  width: 100%; 
  display: flex; 
  gap: 20px; /* 这就是两个子div之间的间距 */
}
.left_50, .right_50{ 
  flex: 1; /* 让两个子元素自动平分容器的可用空间（减去gap的部分） */
}
.bg_light_white{ background-color: #f9f9f9; }
.margin_20{ margin: 20px; }
.index_content{ padding: 15px; box-sizing: border-box; }

这样调整后，两个子div不仅保持等高，还会自动适应容器宽度，间距也刚好是你想要的20px，完全不用手动计算宽度。

Table布局下添加子元素间距的方法 #

display: table-cell的元素不支持margin，不过我们可以利用表格的border-spacing属性来实现间距，这是专门为表格布局设计的单元格间距属性：

修改后的CSS代码：

.full_100{ 
  width: 100%; 
  display: table; 
  border-spacing: 20px 0; /* 第一个值是水平间距，第二个是垂直间距，这里只需要水平间距所以设垂直为0 */
}
.left_50, .right_50{ 
  width: 50%; 
  display: table-cell; 
}
.bg_light_white{ background-color: #f9f9f9; }
.margin_20{ margin: 20px; }
.index_content{ padding: 15px; box-sizing: border-box; }

注意：如果父元素设置了border-collapse: collapse，border-spacing会失效，所以要确保没有这个属性。这个方法能完美保持table布局的等高特性，同时添加子元素间距。

第三种方案的优化：背景移到内部div仍保持等高 #

你之前把bg_light_white移到内部div后无法保持等高，其实只需要让内部的背景div继承父元素的高度即可。结合Flex布局的特性，修改如下：

CSS代码：

.full_100{ 
  width: 100%; 
  display: flex; 
}
.left_50, .right_50{ 
  flex: 1; /* 保持子元素等高 */
  padding: 0 10px; /* 左右各10px，形成两个子div之间20px的间距 */
}
.bg_light_white{ 
  background-color: #f9f9f9; 
  height: 100%; /* 让背景div和父元素（left_50/right_50）一样高 */
}
.margin_20{ margin: 20px; }
.index_content{ padding: 15px; box-sizing: border-box; }

这样内部的背景div会自动撑满父元素的高度，既保持了等高，又通过父元素的padding实现了子div之间的间距，完全不用修改宽度。

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