推荐用 li + li 控制列表项间距，避免首末项错位；用 list-style: none + padding-inline-start + ::before 伪元素统一处理点、线、缩进；响应式下优先调整根字号，辅以 px 微调；Flex 列表优先用 gap，IE 需 fallback；务必统一 line-height 防伪元素偏移。
列表项的统一垂直间距怎么控制更可靠
用 margin 或 padding 单独调每个 <li> 容易错位，尤其嵌套或动态插入时。推荐只对 <ul></ul> 或 <ol></ol> 设置 margin-block-start 和 margin-block-end，再用 li + li 选择器统一控制项间距离：
.list-clean li + li {
margin-top: 0.75rem;
}这样避免首项多出上边距、末项多出下边距，也兼容 Flex/Grid 列表容器。
如何用一个类同时处理点、线、缩进三种视觉标记
别为圆点、横线、数字编号分别写三套类。用 list-style 控制符号类型，配合 padding-inline-start 统一缩进，再用伪元素画自定义线（如需要）：
-
list-style: none关掉默认符号 -
padding-inline-start: 1.5rem固定文本起始位置 -
li::before里用content+background画点或短线
例如实心圆点加细竖线分隔：
立即学习“前端免费学习笔记（深入）”；
.list-dotted-line li {
list-style: none;
padding-inline-start: 2rem;
}
.list-dotted-line li::before {
content: "";
display: inline-block;
width: 0.375rem;
height: 0.375rem;
background: currentColor;
border-radius: 50%;
margin-inline-end: 0.5rem;
vertical-align: middle;
}
.list-dotted-line li:not(:last-child)::after {
content: "";
display: inline-block;
width: 1px;
height: 1.25rem;
background: #e0e0e0;
margin-inline-start: 0.75rem;
vertical-align: middle;
}响应式列表中点/线/间距如何不随字体缩放失衡
用 rem 或 em 是对的，但要注意：如果父容器设了 font-size: 0.875rem，子项的 1rem 就变小了。更稳的方式是：
- 所有列表相关尺寸（
padding、margin、伪元素大小）统一用rem - 根字号
:root { font-size: 16px }不动，靠媒体查询改它，而非局部改 - 点直径、线粗细用
px微调（如4px圆点），避免过小模糊
比如移动端紧凑模式：
@media (max-width: 480px) {
:root { font-size: 14px; }
.list-clean li + li { margin-top: 0.5rem; }
.list-clean li::before { width: 3px; height: 3px; }
}Flex 列表里用 gap 替代 margin 的注意事项
当把 <ul></ul> 设为 display: flex; flex-direction: column 时，gap 确实比 margin 更干净。但得注意：
-
gap在 IE 完全不支持，需加flex-direction: column的 fallback - 不能用
gap控制首尾外边距，仍需padding配合 - 若列表项内含
align-items: stretch的子元素，gap可能被误判为内容高度的一部分
稳妥写法：
.list-flex {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem 0;
}
/* IE fallback */
@supports not (gap: 0.75rem) {
.list-flex { gap: 0; }
.list-flex > * + * { margin-top: 0.75rem; }
}实际项目里最常被忽略的是伪元素的 vertical-align 和父 line-height 冲突，导致点或线偏高偏低——建议所有列表项显式设 line-height: 1.5 并保持一致。
