HTML ol列表空白间距如何调整-html教程-PHP中文网

ol默认上下空白由margin-block-start/end引起，推荐用margin-block精准控制；li间距应统一设margin-block而非margin-bottom；左侧缩进由padding-inline-start决定，可调至24px；移动端需确保min-height和padding满足触控要求。

html ol列表空白间距如何调整

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负值去“拉回”编号——它只动第一行，多行列表项会出视觉错位