如何用CSS实现按钮上下间距1:2的比例布局？

修正后的HTML（补全缺失的引号） #

<div class="main">
  <div class="upper-div"></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">2</button>
    <button class="btn-3">3</button>
  </div>
</div>

方案1：相邻按钮间距1H与2H #

如果需求是第一个按钮到第二个的间距为1H，第二个到第三个为2H，使用以下CSS：

/* 定义基础间距单位，可按需调整数值 */
:root {
  --h: 12px;
}

.main {
  padding: 20px;
}

.upper-div {
  height: 50px;
  background: #f3f4f6;
  /* upper-div与按钮组的间距设为1H */
  margin-bottom: calc(var(--h) * 1);
}

.lower-div {
  /* 垂直排列按钮 */
  display: flex;
  flex-direction: column;
}

.btn-1 {
  margin-bottom: calc(var(--h) * 1);
}

.btn-2 {
  margin-bottom: calc(var(--h) * 2);
}

/* 按钮基础样式，可自定义 */
button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
}

方案2：按钮自身上下边距1:2 #

如果需求是每个按钮上边距1H、下边距2H（相邻按钮间距取较大值2H），使用以下CSS：

:root {
  --h: 12px;
}

.main {
  padding: 20px;
}

.upper-div {
  height: 50px;
  background: #f3f4f6;
  margin-bottom: calc(var(--h) * 1);
}

.lower-div {
  display: flex;
  flex-direction: column;
}

.lower-div button {
  margin-top: calc(var(--h) * 1);
  margin-bottom: calc(var(--h) * 2);
}

/* 移除第一个按钮的上边距，避免与上方容器产生多余间距 */
.lower-div button:first-child {
  margin-top: 0;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
}

关键说明 #

• 用CSS变量--h统一控制间距单位，修改该变量即可同步调整所有间距，始终保持1:2的比例关系。
• 垂直排列按钮既可以用Flex布局，也可以给按钮设置display: block，效果一致。

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