index.html如何设置首行缩进？-html教程-PHP中文网

最直接方式是用 CSS 的 text-indent 属性作用于块级元素（如），设 text-indent: 2em；它仅缩进首行，不适用于内联元素，且优于手动加空格或全角空格。

index.html如何设置首行缩进？

用 text-indent 实现首行缩进最直接

HTML 本身不处理排版细节，首行缩进必须靠 CSS。最标准、最可控的方式是给段落元素（比如

）设置 text-indent 属性。

注意：这个属性只作用于**块级元素的第一行**，对

、、 等有效，但对  或内联元素无效（除非先设 display: block）。常见写法示例：
p {
  text-indent: 2em;
}


2em 是常用值，约等于当前字体大小的两倍，比用 px 更适配不同字号
负值（如 -1em）可用于向左缩进，但极少用于首行，多见于悬挂缩进场景
不要对整个  或  设 text-indent，它不会继承生效

为什么不用   或全角空格？
手动在每段开头加   或输入中文空格，看似简单，但实际埋了不少坑：

编辑时看不见、难定位，多人协作容易漏加或重复加
响应式下字体缩放或换行位置变化时，缩进可能错位甚至跑到第二行
复制文本时会把多余空格一起复制出去，影响数据清洗或 SEO 提取
无法统一控制——比如想把所有段落缩进从 2em 改成 1.5em，CSS 一行就搞定，而 HTML 里得逐个改

遇到 pre 标签或代码块里的文字不缩进？
 默认保留原始空白符，且 white-space: pre 会让 text-indent 失效。如果你真需要在预格式化内容里模拟首行缩进，有两条路：

											
												
												
													Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
													实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
												
												下载
												
											
										
改用  + white-space: pre-wrap，再加 text-indent（推荐）
放弃 text-indent，用 padding-left 模拟，但注意这会整体左移全部内容，不是“仅首行”

例如：
code-block {
  white-space: pre-wrap;
  text-indent: 2em;
}
移动端或小屏幕下缩进看起来太宽？
em 单位虽然相对，但若用户缩放字体或系统启用“更大字体”辅助功能，2em 可能撑出水平滚动条。更稳妥的做法是配合媒体查询做降级：
p {
  text-indent: 2em;
}
@media (max-width: 480px) {
  p {
    text-indent: 1.5em;
  }
}
另外，iOS Safari 对 text-indent 在某些字体组合下偶有渲染偏差，如果发现首行缩进轻微错位，加一句 transform: translateZ(0) 强制硬件加速有时能缓解——但这属于边缘 case，别一上来就加。
真正要留心的是：缩进只是视觉提示，别让它干扰可访问性。屏幕阅读器不感知 text-indent，所以段落结构仍得靠语义化标签（
、）和 ARIA 来保障。