如何让垂直列中的div元素保持均等间距？

1. Flexbox（最省心的方案） #

给父容器开启Flex垂直布局，直接用gap属性指定间距就行，完全不用操心margin重叠的问题：

.parent-box {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 20px; /* 调整这个值来控制div之间的间距大小 */
}

这种方式代码简洁，浏览器支持也到位，新手优先用这个。

2. Margin手动控制 #

如果不想用Flex/Grid，也可以给子div加margin，但要处理首尾元素的多余间距：

• 方案A：给所有子div加上下margin，再给父容器反向抵消首尾的margin

.child-div {
  margin: 20px 0;
}
.parent-box {
  margin-top: -20px;
  margin-bottom: -20px;
}

• 方案B：只给除第一个div外的元素添加上margin

.child-div:not(:first-child) {
  margin-top: 20px;
}

这种方式兼容性拉满，但代码比Flex麻烦点。

3. Grid布局 #

和Flexbox逻辑差不多，父容器开Grid单列布局，用gap设间距：

.parent-box {
  display: grid;
  grid-template-columns: 1fr; /* 强制单列 */
  gap: 20px;
}

适合本来就用Grid布局的场景，效果和Flex一致。

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