gap在HTML时间轴中通常无效，因默认为list-item而非flex/grid；需改display并权衡语义损失，或直接用margin-bottom更稳妥。
在 HTML 时间轴布局中直接用 gap 控制节点间距，多数情况下是无效的——它根本不会起作用，不是写错了，而是布局前提没满足。
为什么 gap 在时间轴里经常“消失”
gap 只对 display: flex 或 display: grid 容器生效，而绝大多数时间轴结构用的是 <ol></ol> + <li>，默认是 display: list-item。哪怕你给 <ol></ol> 加了 gap: 2rem，浏览器也完全无视。
- 常见误操作：给
<ol class="timeline"></ol>直接加gap，结果 DevTools 的 Computed 面板里压根不显示该属性 - 真正起作用的是
margin-bottom（比如.timeline li { margin-bottom: 2rem; }），这才是控制节点垂直间距的常规手段 - 如果硬要上
gap，必须先把<ol></ol>改成display: flex; flex-direction: column;，但这时会丢失语义和默认列表序号，得手动补::before计数器
gap 能用上的少数真实场景
只有当你把时间轴重构为 Flex 或 Grid 布局时，gap 才有实际价值，典型如横向时间轴、卡片式时间轴或响应式多列时间轴。
- 横向滚动时间轴：
display: flex; flex-wrap: nowrap; overflow-x: auto;，然后用gap: 1rem控制卡片间空隙 - 网格化时间轴（比如 2×N 年份+事件组合）：
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))); gap: 1.5rem; - 左右交替布局中，若用 Flex 模拟两栏（非伪元素画线），可用
row-gap统一控制行间距，避免margin合并干扰
Safari 14.0 及更早版本的 gap 兼容陷阱
即使你用了 Flex 布局并加了 gap，iOS 14.0–14.4（对应 Safari 14.0）仍会静默忽略所有 gap 简写，包括 gap: 1rem 和 gap: 1rem 0.5rem。
立即学习“前端免费学习笔记（深入）”；
- 它只认
row-gap和column-gap两个独立属性，且不支持-webkit-gap前缀 - 安全写法是：始终分开声明，例如
row-gap: 1.5rem; column-gap: 1.5rem;，哪怕数值相同 - 混用风险高：比如同时写
gap: 1rem和row-gap: 2rem，后者会覆盖行距，但列距仍为 1rem，视觉失衡
Flex 时间轴中 gap 生效的硬性条件
就算写了 display: flex 和 row-gap，也不代表间隙一定可见。
- 父容器必须设
flex-wrap: wrap才能触发row-gap（单行 Flex 不计算行间距） - 子项不能设
flex-shrink: 0且内容过宽，否则容器被撑满，间隙被“压扁”不可见 - 别用
display: contents包裹<li>或内容区——它会让子项脱离渲染树，gap失去作用对象 - 调试时看 DevTools 的 Computed 面板，确认生效的是
row-gap值，而不是子项的margin或padding
真正容易被忽略的是：时间轴的语义结构（<ol></ol>）和布局需求（需间隙）之间存在天然张力。强行用 gap 往往意味着放弃语义或增加 hack 成本，不如老实用 margin-bottom 控制节点间距，再用伪元素画线——简单、稳定、兼容性好。
