gap在ul/li树形结构中无效，因其仅适用于flex/grid容器；应使用margin-bottom和padding-top组合控制层级间距，并用em单位确保连线对齐。
纯 CSS 树形布局里，gap 不是直接可用的属性——它只在 flex 和 grid 容器中生效，而标准的族谱树结构依赖嵌套 ul/li，默认是 block 流，gap 无效。
为什么 ul/li 里用不了 gap
嵌套列表的层级关系靠 HTML 结构表达，渲染时每个 li 是独立块级元素，父子之间没有「容器级间隙控制」机制。gap 是 display: flex 或 display: grid 的专属属性，对 display: block（默认 li 行为）完全不响应。
常见错误是给 ul 加 display: flex 再设 gap，结果子节点横向排成一行，树形彻底崩坏。
- 别给顶层
ul设display: flex——会压平层级 - 也别指望
gap能自动作用于嵌套深度 ——它只管直系子元素 - 若强行用
grid模拟树，需手动计算行列位置，失去「增删节点自动重排」的优势
真正可控的层级间距：margin + padding 组合
树形结构中，垂直方向的层级距离由两部分构成：父节点到子节点的「跨层距离」，以及同层兄弟节点间的「并列距离」。这两者必须分开控制，否则缩进错乱、连线偏移。
推荐做法是：
- 给每个
li设margin-bottom: 1.2em控制同层间距 - 给
ul设padding-top: 1.5em控制子树整体上浮，形成「子节点比父节点低」的视觉落差 - 避免用
margin-top——容易触发外边距合并（margin collapse），导致间距不可预期
示例片段：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
li {
margin-bottom: 1.2em;
}
li > ul {
padding-top: 1.5em;
margin: 0;
}
伪元素画线时，间距必须和 line-height 对齐
用 ::before 或 ::after 画竖线/横线连接父子节点时，线的位置依赖 top/left 像素值或 em 单位。一旦 line-height 或字体大小变化，所有线都会偏移。
关键原则是：所有定位值优先用 em，且与文字行高保持整数倍关系。
- 设
line-height: 1.4，则竖线高度建议用1.4em、2.8em这类倍数 - 横线左端对齐父节点末尾，右端延伸至子节点顶部，其
top应等于父节点line-height的一半（如0.7em） - 如果用了
rem或像素值，窗口缩放或用户调整字号时，线会脱离文字
横向撑开问题：gap 不是万能解，缩进才是根本
三百人族谱横向爆宽，不是因为「间隙太大」，而是因为每层都用 padding-left 累加缩进。比如 10 层深，每层 2em，最深层节点就偏移 20em ——远超视口。
解决思路不是减小 gap，而是换缩进策略：
- 用
transform: translateX()替代padding-left，不参与文档流，不影响宽度计算 - 对超过 5 层的子树，改用「折叠按钮 + display: none」，默认只展开前 3 层
- 禁用
white-space: nowrap，允许姓名自动换行，比硬调缩进更治本
真正难处理的，是当某一代集中出现 20+ 个兄弟节点时，横向空间依然不够——这时已不是 CSS 能单点优化的问题，得回到数据结构，考虑分页、分栏或交互式滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
