如何消除UL元素间冗余空白，实现紧凑均匀布局

你的UL元素之间的空白主要来自浏览器默认的<ul>外边距，结合flex布局的默认对齐方式，导致了未利用的垂直空间。以下是修复后的CSS代码：

.vertical-tree{
    display: flex;     
    flex-wrap: wrap;     
    line-height: 0.5em;
    align-items: flex-start; /* 避免子元素被强制拉伸至相同高度 */
}

.vertical-tree ul{
    padding-left: 25px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 0 1em;
    margin: 0; /* 清除浏览器默认的ul上下外边距 */
}
.vertical-tree li {
    margin: 0;
    list-style-type: none;
    position: relative;
    padding: 2px 5px 0px 1px;
}

核心修改说明 #

• 清除UL默认外边距：浏览器会给<ul>元素默认添加margin-top和margin-bottom，这是空白的主要来源，通过margin: 0直接清除。
• 调整flex对齐方式：默认align-items: stretch会让所有UL子项被拉伸至容器内最高元素的高度，设置为flex-start让每个UL仅占据自身内容高度，避免不必要的垂直空间浪费。

如果仍有细微间隙，可以检查是否存在其他元素的padding/margin影响，但以上修改足以解决你截图中显示的主要空白问题。

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