ol默认上下空白由margin-block-start/end引起，推荐用margin-block精准控制；li间距应统一设margin-block而非margin-bottom；左侧缩进由padding-inline-start决定，可调至24px；移动端需确保min-height和padding满足触控要求。
ol列表上下空白怎么去掉或收紧
浏览器会给ol默认加margin-block-start和margin-block-end，通常约1em，导致列表前后“多出一截空”。这不是bug，是规范行为。直接设margin: 0能清掉，但更推荐用逻辑属性精准控制：
- 用
margin-block-start: 0.2em替代margin-top，适配从右到左语言（如阿拉伯语） - 若只针对首尾，不希望影响嵌套子列表，加属性选择器：
ol:not(ol > ol) { margin-block: 0.15em 0.25em; } - 注意：
ol > li本身也有默认上下间距（来自margin-block），若想进一步压缩行距，得单独重置li的margin-block
ol内部项间距太大，怎么调小
ol里每个li默认带margin-block-end（约0.5em），连续项之间就堆出明显空隙。常见误操作是给li设margin-bottom: 0——这会干掉最后一项的下边距，但中间项仍保留上边距，实际效果不均等。
- 正确做法：统一用
margin-block: 0.2em 0，让每项只在下方留空，末项自然无多余间隙 - 如果用了
display: flex或grid布局的ol，gap比margin更干净，且不触发外边距合并：ol { display: flex; flex-direction: column; gap: 0.3em; } - 慎用
line-height调垂直间距——它只影响文字行高，对li整体盒模型无直接影响，且可能让编号与文字错位
ol左侧缩进（项目符号离文字太远）怎么改
这个“空白”其实是ol的padding-inline-start，用于容纳编号（1.、2.等）及其右侧预留空间。Chrome/Firefox 默认值约40px，Safari略小，所以跨浏览器表现不一致。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 设
padding-inline-start: 24px可收窄，但别低于18px，否则编号可能被截或贴边 - 若想彻底自定义编号位置，可用
list-style-position: inside，此时编号进内容区，padding-inline-start可设为0，但要注意文字换行后可能顶到编号 - 不建议用
text-indent负值去“拉回”编号——它只动第一行，多行列表项会出视觉错位
移动端ol列表点按区域小、间距难调准
iOS Safari 会接管ol的渲染逻辑，尤其当列表项含input或button时，CSS对li的padding或margin调整可能只影响视觉，不扩大真实点击热区。
立即学习“前端免费学习笔记（深入）”；
- 确保
li有足够min-height: 44px（iOS最小推荐触控尺寸），并配合padding: 12px 16px - 避免给
ol设height——容易挤压编号或导致滚动异常 - 真机测试比DevTools盒模型更可靠：点开列表，看手指按下时高亮区域是否覆盖整个
li，而不是只包文字
真正难调的不是“怎么改数值”，而是让ol在各种缩放比例、字体设置、屏幕密度下，编号对齐不漂、触控不漏、嵌套不叠。多在不同设备上滚动、缩放、点按，比盯着CSS声明有用得多。
