HTML段落缩进样式的完整代码示例-html教程-PHP中文网

text-indent是实现段落首行缩进最稳妥的css属性，所有现代浏览器均支持；推荐用2em或1.5em，避免像素值；禁用、padding-left/margin-left模拟缩进；兼容ie8时需注意overflow截断问题。

html段落缩进样式的完整代码示例

所有现代浏览器都支持 text-indent，它是专为段落首行缩进设计的 CSS 属性，不会影响其他行或破坏盒模型。别用 padding-left 或 margin-left 代替，那会整体偏移整段文字，语义和行为都不对。

常见错误是给 <p></p> 加了 text-indent 却没设 white-space: normal（默认就是 normal，一般不用显式写），结果换行后第二行也缩进了——其实是因为内容里混了或意外的空格，不是样式问题。

text-indent 值推荐用 2em（中文排版常用）或 1.5em，避免用固定像素值（如 32px），否则缩进在不同字号下不协调
若段落前有标题，且希望首段不缩进（如文章开头），可单独加类：<p class="no-indent">...</p>，再配 .no-indent { text-indent: 0; }
注意：text-indent 对 display: inline 元素无效，只作用于块级或 inline-block 等可设置宽度/换行的元素

有人在段首加多个模拟缩进，这会导致 HTML 结构污染、复制粘贴时多出不可见字符、屏幕阅读器朗读异常，还可能被 Markdown 或 CMS 自动过滤掉。

更麻烦的是响应式场景：小屏下字体变小，缩进量却不变，视觉上要么太挤要么太松。而 text-indent: 2em 会随字体大小自动缩放。

如果后端富文本编辑器输出了带的段首，应在渲染前用 JS 或服务端逻辑清理，而不是靠 CSS 补救
绝对不要写成 <p> 这是段落…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> —— 这不是样式，是数据污染

IE 6–8 支持 text-indent，但有个经典 bug：当父容器设置了 overflow: hidden 且子段落有较大 text-indent 时，首行可能被截断。这不是样式写错，是渲染引擎缺陷。

临时绕过方式：给 <p></p> 加 zoom: 1（触发 hasLayout）或改用 overflow: visible
如果必须兼容 IE8 且不能改父容器，可用 text-indent: 2em; margin-left: -2em; padding-left: 2em; 组合模拟，但仅限兜底，别作为首选方案
现代项目（IE11+ 或完全不支持 IE）直接用 text-indent 就行，无需 hack

参考文献、术语解释等场景常需“悬挂缩进”（第一行靠左，其余行缩进），这时把 text-indent 设为负值，再用 padding-left 把整段右推即可。

p.hanging {
  text-indent: -2em;
  padding-left: 2em;
}

关键点在于：负 text-indent 只拉回首行，padding-left 是给整个盒子加内边距，两者叠加才实现视觉上的悬挂效果。别只设负 text-indent 而不加 padding-left，否则首行会溢出容器左侧。

这个技巧在 PDF 导出（通过 CSS @media print）或长列表排版中很实用，但要注意 padding-left 值必须 ≥ |text-indent|，否则文字会被裁切。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

HTML段落缩进样式的完整代码示例