ol紧凑排列需重置margin: 0、line-height: 1.2、padding-inline-start: 0；禁用list-style改用li::before伪元素编号；横排用display: flex；嵌套缩进用ol ol分层控制；兼顾可访问性留呼吸空间。
ol默认行高和外边距是紧凑排列的最大障碍
浏览器给<ol></ol>设的默认margin（上下各1em左右）和line-height（通常1.2–1.5）会让列表看起来松散。不重置这些，光调padding或text-align没用。
必须显式覆盖：
-
margin: 0;清掉上下空白 -
line-height: 1.2;建议在1.1–1.3之间微调，太小易重叠，太大又空 -
padding-inline-start: 0;清除左侧缩进（注意不是padding-left，兼容RTL）
多行文本第二行不贴序号？别用list-style-position: inside
这个属性看似“把序号拉进内容框”，但实际会破坏基线对齐：第二行文字常顶到序号下方，尤其在自定义字体或line-height非整数时更明显。
真正可控的做法是关掉原生序号，改用伪元素：
立即学习“前端免费学习笔记（深入）”；
-
list-style: none;彻底禁用默认编号 -
li::before或li::marker手动注入编号（li::marker在 Safari ≤16.4 不支持，生产环境优先用::before） - 配合
counter-increment和counter(list-item)保证语义连续
横向紧凑排列：flex比float更稳
如果目标是让<ol></ol>横排（比如步骤导航），float需要额外清除塌陷，而flex一行解决：
-
display: flex;加在<ol></ol>上 -
gap: 0.75em;控制项间距，比用margin更干净 -
align-items: center;垂直居中，避免文字上下浮动 - 记得移除
list-style，否则序号和flex布局容易打架
嵌套ol时缩进失控？用ul ul选择器精准控制
嵌套的<ol></ol>会继承父级缩进，但浏览器实现不一致——Chrome可能加padding-left: 2em，Firefox用margin-left。靠猜值不可靠。
推荐写法：
- 统一清空所有
<ol></ol>的padding和margin，只留结构语义 - 用后代选择器如
ol ol、ol ol ol分层控制缩进量 - 例如：
ol ol { padding-inline-start: 1.5em; }，数值按层级递增，而非固定倍数
最易被忽略的是：紧凑 ≠ 挤压。过度压缩line-height或padding会让屏幕阅读器跳读失败，或在高DPI屏上文字粘连。留出至少0.1em的呼吸空间，比“看起来紧”更重要。
