如何为同一父div下不同子div内的h4标签设置均等垂直间距

CSS方案（推荐，现代浏览器） #

问题核心是h4被嵌套在子div中，普通flex布局只能控制子div的间距，无法穿透到内部的h4。通过display: contents让中间的子div“透明化”，将所有h4直接暴露给容器的flex布局，就能实现均等垂直间距：

<!-- 原有结构无需修改 -->
<div class="container">
  <div class="personal-details">
    <h4>姓名</h4>
    <h4>年龄</h4>
  </div>
  <div class="school-details">
    <h4>学校</h4>
    <h4>专业</h4>
  </div>
  <!-- 可缺失任意子div -->
</div>

/* 容器设置垂直flex布局，必须指定高度（如视口高度、固定值） */
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 让所有h4间距均等，包括上下两端 */
  height: 100vh; /* 替换为你需要的容器高度，比如800px */
  padding: 0;
  margin: 0;
}

/* 让中间的子div不参与布局，h4直接继承容器的flex规则 */
.container > div {
  display: contents;
}

/* 清除h4默认边距，避免干扰间距计算 */
.container h4 {
  margin: 0;
  padding: 0;
}

JS兼容方案（支持旧浏览器） #

如果需要兼容不支持display: contents的浏览器（如IE），可以通过JS动态计算并设置间距：

const container = document.querySelector('.container');
const allH4 = container.querySelectorAll('h4');
const h4Total = allH4.length;

// 确保容器有明确高度
if (!container.style.height && !container.offsetHeight) {
  container.style.height = '100vh';
}

const containerHeight = container.offsetHeight;
const totalH4Height = Array.from(allH4).reduce((sum, el) => sum + el.offsetHeight, 0);
// 计算均等间距：剩余空间 / (h4数量 + 1)，包含上下两端的间距
const equalGap = (containerHeight - totalH4Height) / (h4Total + 1);

// 给每个h4设置间距
allH4.forEach((h4, idx) => {
  h4.style.marginTop = `${equalGap}px`;
  h4.style.marginBottom = '0';
});

// 清除容器默认内边距
container.style.padding = '0';

关键注意事项 #

• 容器必须有明确的高度（固定值、百分比、视口高度等），否则flex/JS无法计算剩余空间分配间距。
• 务必清除h4的默认margin，否则会导致实际间距不均。
• space-evenly会让h4上下两端的间距和中间间距一致；如果需要上下贴边，可替换为space-between。

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