如何为垂直隐式尺寸列表项设置相对于项尺寸的百分比间隙？

首先明确：纯CSS下确实没有原生的完美通用方案直接实现，但可以通过两种思路解决——纯CSS适配特定场景，或JS辅助实现通用场景。

一、纯CSS方案（适配列表项宽高相等的场景） #

如果你的列表项是宽高相等的元素（比如正方形），可以利用垂直margin百分比基于容器宽度计算的特性，间接实现间隙为列表项高度的百分比：

.vertical-list {
  width: 100%; /* 容器宽度确定 */
}

.list-item {
  width: 200px; /* 或其他固定/相对宽度，保证宽高相等 */
  height: auto; /* 隐式高度，和宽度一致（比如内容撑满正方形） */
  margin-bottom: 10%; /* 此时10%等于列表项宽度的10%，也就是高度的10% */
}

/* 移除最后一项的底部间隙 */
.list-item:last-child {
  margin-bottom: 0;
}

这种方法的核心是利用“宽高相等”的前提，让基于宽度的百分比margin等价于基于高度的百分比。

二、通用方案（JS辅助，适配所有场景） #

如果列表项宽高不固定或不相等，需要通过JS动态获取每个列表项的高度，再设置对应的间隙：

<div class="vertical-list">
  <div class="list-item">内容1</div>
  <div class="list-item">内容2</div>
  <div class="list-item">内容3</div>
</div>

.vertical-list {
  display: flex;
  flex-direction: column;
}

.list-item {
  /* 基础样式 */
}

.gap-element {
  /* 间隙元素，由JS设置高度 */
}

const list = document.querySelector('.vertical-list');
const items = list.querySelectorAll('.list-item');

items.forEach((item, index) => {
  if (index !== items.length - 1) {
    const itemHeight = item.offsetHeight;
    const gapHeight = itemHeight * 0.1; // 10%的间隙比例
    const gap = document.createElement('div');
    gap.classList.add('gap-element');
    gap.style.height = `${gapHeight}px`;
    list.insertBefore(gap, item.nextSibling);
  }
});

这种方法通过动态创建间隙元素，直接基于列表项的实际高度计算间隙大小，完全符合需求。

三、未来可能的纯CSS方案 #

目前CSS规范中，gap属性的百分比计算逻辑是基于容器的尺寸，但未来如果支持基于子元素尺寸的百分比单位（或容器查询的进一步扩展），可能会有纯CSS的通用解法，但当前阶段还无法实现。

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