Markdown 缩进完全指南:首行缩进、段落缩进、列表嵌套一文搞定

Markdown缩进

Markdown 本身没有专门的"缩进"语法。这个设计是故意的——John Gruber 在设计 Markdown 时,排版布局的活儿就交给了 CSS,Markdown 只管内容结构。但现实是,写技术文档、博客文章、README 的时候,缩进需求又确实存在。特别是中文排版,"首行缩进两个汉字"几乎是刚需。

这篇文章把 Markdown 中所有跟缩进相关的场景和方法都梳理一遍,看完之后不管你是想在 GitHub 上做嵌套列表,还是在博客里实现首行缩进,都能找到对应方案。

先搞清楚:Markdown 中的缩进规则

在讲具体方法之前,得先理解 Markdown 对缩进的处理逻辑。说白了,Markdown 解析器看到行首的空格和 Tab,会根据数量决定它是什么:

行首空格/Tab 数量Markdown 的理解效果
0 个普通段落文本正常显示
1-3 个空格普通段落文本(空格被忽略)看不出缩进
4 个空格或 1 个 Tab代码块等宽字体显示
列表项前的 2-4 个空格嵌套列表项下一级列表
> 符号引用块(blockquote)左侧带竖线

这个规则来自 CommonMark 规范Gruber 的原始文档。所以你直接在段落前面敲空格,大概率看不到任何缩进效果——解析器直接忽略了。

方法一:HTML 空格实体(最常用)

这是用得最广泛的方案,原理是在 Markdown 中直接插入 HTML 空格实体字符。解析器不会忽略 HTML 实体,所以缩进能生效。

四种 HTML 空格实体对照

实体名称宽度适用场景
 不间断空格约 1 个字符宽度英文排版,微调间距
 半角空格约 0.5 个中文字符宽度较少使用
 全角空格约 1 个中文字符宽度中文首行缩进首选
 窄空格约 0.2 个字符宽度细微间距调整

中文首行缩进写法

中文文章习惯首行缩进两个汉字,用两个   刚好:

  这是一段中文文字,首行会缩进两个汉字的宽度。这个方法在 GitHub、Typora、VS Code 预览中都能正常显示。

  每个段落开头都加上这两个实体就行。虽然有点麻烦,但兼容性最好。

英文缩进写法

英文缩进一般用 4 个   或 2 个  

    This paragraph has an indent at the beginning. It works across most Markdown renderers.

说实话,这个方法最大的缺点就是手动敲实体太累。不过如果你用的是 Typora 或 VS Code,可以设置代码片段(snippet)来快速输入。我之前写一篇长文章,每个段落都要手动加   ,后来直接在 VS Code 里设了个 snippet,输入 ;2em 就自动展开,效率提升不少。

方法二:全角空格(中文排版的隐藏技巧)

这个方法很多英文教程不会提,但对中文用户来说可能是最简单的方案。

操作步骤:把输入法切换到全角模式,然后直接敲两个空格。

  这段文字前面是两个全角空格,在中文排版中等同于首行缩进两个字。

全角空格(Unicode U+3000)在绝大多数 Markdown 渲染器中不会被忽略,所以能实现视觉缩进。相比   实体,全角空格在源码中看起来更直观。

不过有个小坑:有些编辑器的自动格式化工具会把全角空格替换成普通空格,导致缩进丢失。如果你发现缩进突然消失了,检查一下编辑器的格式化设置。我有一次用 Prettier 格式化 Markdown 文件,格式化完所有全角空格全没了,之后就不敢在有用到 Prettier 的项目里用这个方案了。

方法三:引用块实现视觉缩进

如果你的目的不是首行缩进,而是想把一整段文字往右挪——比如在文章中引用别人的话、突出显示某个段落——用引用块(blockquote)最合适:

> 这段文字会向右缩进,左侧出现一条竖线。
> 可以写多行内容,视觉效果等同于整体缩进。
>
> 甚至可以分段,中间空一行加 `>` 就行。

引用块可以嵌套使用,实现多层缩进:

> 第一层缩进
>
> > 第二层缩进
> >
> > > 第三层缩进

引用块严格来说不算"缩进语法",但它是 Markdown 原生支持的功能,在所有渲染器中都兼容,而且语义上表示"引用内容",对于文章中引用别人观点的场景非常合适。

方法四:HTML 标签控制缩进

当你需要精确控制缩进距离,或者想让整段文字都缩进(不只是首行),可以用 HTML 的 divp 标签配合 margin-left 样式:

<div style="margin-left: 2em;">
这段文字整体向右缩进了 2em。
适用于需要大面积缩进的场景。
</div>

或者用 padding-left

<p style="padding-left: 40px;">
这段文字左侧有 40px 的内边距。
可以精确到像素级控制缩进距离。
</p>

注意:这个方法依赖于 Markdown 渲染器支持 HTML 标签和内联样式。GitHub 和大部分静态博客生成器(Jekyll、Hugo、Hexo)都支持,但有些平台(比如部分论坛、Discord)会过滤掉 HTML 标签。

方法五:列表嵌套缩进

列表嵌套是 Markdown 中缩进最有"官方支持"的场景。在列表项前加 2-4 个空格,就能创建子列表:

- 第一项
  - 嵌套子项(2 个空格)
    - 更深的嵌套(4 个空格)
- 第二项
  - 子项
    - 深层子项
      - 还能更深

有序列表和无序列表可以混用:

1. 安装步骤
   - 下载安装包
   - 运行安装程序
2. 配置步骤
   1. 打开配置文件
   2. 修改端口号
      - 默认端口:8080
      - 自定义端口范围:1024-65535

关于列表缩进,有一个经常被问到的问题:到底缩进 2 个空格还是 4 个空格?

CommonMark 规范的定义是:列表项的延续内容需要缩进到列表标记之后的文本起始位置。对于无序列表(-),标记占 2 个字符,所以子项缩进 2 个空格就够了。对于有序列表(1.),标记占 3 个字符,子项需要缩进 3 个空格。

实际操作中,大多数渲染器对 2-4 个空格的缩进都能正确识别,但如果你在 GitHub 上发现嵌套列表渲染异常,试试调整缩进空格数。

方法六:CSS 全局缩进(一劳永逸)

如果你有自己的博客或网站,用 CSS 设置全局首行缩进是最优雅的方案。一次设置,所有段落自动缩进,不用在每个段落前手动加任何东西:

/* 所有段落首行缩进 2em */
p {
  text-indent: 2em;
}

/* 注意:避免图片也被缩进 */
p img {
  margin-left: -2em;
}

这个方案适合 Jekyll、Hugo、Hexo 等静态博客,也适合 WordPress。在 GitHub README 或他人平台上就用不了了,因为你控制不了 CSS。

顺便提一句,用了 CSS 缩进之后,记得清理旧文章里手动加的 &emsp; 和全角空格,否则会出现双重缩进。之前帮一个朋友从 WordPress 迁移到 Hugo,他之前每篇文章都手动加了 &emsp;&emsp;,切到 CSS 方案后全变成了"双倍缩进",最后写了个脚本批量清理。

不同场景该用哪种方案?

场景推荐方案原因
GitHub README 中的嵌套列表列表缩进(2-4 空格)原生支持,无需 hack
GitHub README 中的段落缩进&emsp;&nbsp;GitHub 支持但会过滤部分 HTML
Typora 写中文博客全角空格或 &emsp;直观、兼容性好
自建博客网站CSS text-indent一劳永逸,内容与样式分离
需要精确控制缩进距离HTML margin-left像素级精确
引用别人的内容引用块 >语义正确,原生支持
Pandoc / R MarkdownLine block \| 语法原生保留前导空格

渲染器兼容性参考

不同平台对缩进方案的支持程度不同,这里整理了一张对照表:

方案GitHubTyporaVS CodeObsidianJekyll/Hugo
&nbsp; / &emsp;
全角空格
引用块 >
HTML margin-left⚠️ 部分过滤⚠️ 有限支持
CSS text-indent
Pandoc line block \|⚠️ 需 Pandoc

表格中 "⚠️ 部分过滤" 是指 GitHub 会保留部分 HTML 标签但过滤掉 style 属性中的某些属性值,实际效果需要测试。

关于 Tab 键

在 Markdown 编辑器中按 Tab 键,行为取决于编辑器:

  • Typora:在列表中按 Tab 会缩进当前项;在普通段落中按 Tab 可能插入 4 个空格或跳到下一个焦点
  • VS Code:默认插入 4 个空格(可在设置中改为 2 个);在列表中按 Tab 会缩进
  • Obsidian:在列表中按 Tab 缩进;在普通文本中不响应
  • GitHub 在线编辑器:Tab 键主要用于列表缩进

总之,Tab 键在 Markdown 编辑器中主要用于列表缩进,不适合用来做段落首行缩进。

常见问题

为什么我在段落前加空格没有效果?

Markdown 规范规定,1-3 个前导空格会被忽略。4 个及以上的空格会把内容变成代码块。所以直接敲空格做段落缩进是行不通的。

&emsp;&nbsp; 有什么区别?

&emsp; 的宽度等于一个中文字符(也叫"全角空格"),&nbsp; 的宽度约等于一个英文字符。中文首行缩进用 &emsp; 更精确,2 个 &emsp; 刚好是两个汉字的宽度。

GitHub 上能用 HTML 样式做缩进吗?

GitHub 的 Markdown 渲染器(GFM)支持部分 HTML 标签,但会过滤掉 style 属性。所以 <div style="margin-left: 2em;"> 这种写法在 GitHub 上大概率不生效。在 GitHub 上推荐用 &emsp; 或引用块。

怎么在 VS Code 里快速输入 &emsp;

可以在 VS Code 的 snippets 中添加自定义代码片段。打开命令面板搜索 "Configure User Snippets",选择 markdown.json,添加:

{
  "Chinese indent": {
    "prefix": ";2em",
    "body": ["&emsp;&emsp;$0"],
    "description": "插入中文首行缩进"
  }
}

之后在 Markdown 文件中输入 ;2em 按 Tab 就能快速插入。


Markdown 缩进这个话题说大不大,说小不小。语法层面确实没有原生支持,但通过 HTML 实体、全角空格、引用块、HTML 标签、CSS 这几种方式,基本上能覆盖所有缩进需求。选哪种方案,主要看你用的平台和场景——在 GitHub 上写 README,用 &emsp; 和列表缩进就够了;自己搭博客的话,直接上 CSS text-indent,干净利落。

来源