Html 使用列计数和列规则时的列填充

我已经创建了column count属性，以便在我的UL中创建一个三列布局。我希望每个列看起来彼此分开，并使用column rule属性来实现这一点

下面是一个这样的示例：

我想要实现的是为每列添加顶部和底部填充。如果我将顶部和底部填充添加到UL，它看起来如下所示：

请注意，它们看起来不再像三个独立的列

有人知道如何在不将所有列连接在一起的情况下将填充添加到所有列中吗

要点：

• 此列表中的项目数量可能会有所不同。（否则，我会考虑在CSS中使用第n个child）
• 我曾考虑过使用flex包装，但我认为这需要固定的高度。（如果我错了，请纠正我。）
• 目的是将所有列表项置于一个UL之下

正文{
字体系列：系统界面；
背景：白色；
文本对齐：居中；
}
保险商实验室{
字体大小：1.3rem；
线高：2.3em；
弹性基准：100%；
柔性包装：包装；
背景：粉红色；
边际：0px；
列数：3；
列规则：15px固体
白色
列表项样式：无；
列表样式：无；
边际：0px；
填充：10px 0px；
}
李{
边框：1px纯红；
边际：0px；
}

您可以通过保持填充和更改背景颜色来近似它，以创建带有渐变的间隙：

正文{
字体系列：系统界面；
背景：白色；
文本对齐：居中；
}
保险商实验室{
字体大小：1.3rem；
线高：2.3em；
弹性基准：100%；
柔性包装：包装；
背景：
线性梯度（#fff，#fff）计算（1*100%/3-5px）0，
线性梯度（#fff，#fff）计算（2*100%/3+5px）0，
粉红色
背景尺寸：15px100%；
背景重复：无重复；
边际：0px；
列数：3；
柱规则：15px纯白；
柱间距：15px；
列表项样式：无；
列表样式：无；
边际：0px；
填充：10px 0px；
}
李{
边框：1px纯红；
边际：0px；
}

已经回答了，但使用css变量更进一步，以注意a列间距：

它也是平均值，但可以让您了解使用渐变的可能性

html，
身体{
字体系列：系统界面；
背景：白色；
保证金：0；
文本对齐：居中；
}
保险商实验室{
--colGapSize:15px；
--colGapSizeBg:calc（var（-colGapSize）/2）；
字体大小：1.3rem；
线高：2.3em；
背景：线性渐变（向右，
粉红色钙（33.33%var（--colGapSizeBg）），
白钙（33.33%var（--colGapSizeBg）），
白钙（33%+var（--colGapSizeBg）），
粉红钙（33%+var（--colGapSizeBg）），
粉红色钙（67%-var（--colGapSizeBg）），
白钙（67%-var（--colGapSizeBg）），
白钙（66.66%+var（--colGapSizeBg）），
粉红色钙（66.66%+var（--colGapSizeBg）））
;
边际：0px；
列数：3；
列间距：var（--colGapSize）；
列表样式：无；
边际：0px；
填充：10px 0px；
}
李{
边框：1px纯红；
保证金：自动；
填充：0；
框大小：边框框；
最大宽度：100%；
}

我肯定你是一名晋升的线性梯度工程师。你用的太多了。很好的解决方案。。。谢谢你。顺便提一下我删除了行列规则：15px纯白；作为背景渲染间隙。