HTML段落悬挂缩进的设置教程-html教程-PHP中文网

text-indent负值配合margin-left是实现悬挂缩进最可靠组合：text-indent:-2em将首行左移，margin-left:2em将整段右推，使首行凸出、后续行缩进2em。

html段落悬挂缩进的设置教程

text-indent 负值 + margin-left 是最可靠组合

悬挂缩进在 HTML 中不能靠单个属性一招搞定，text-indent 负值本身只把首行往左拉，但后续行不会自动右移——必须配 margin-left 把整段内容“托”到右边，才能形成视觉上“首行凸出、其余缩进”的效果。

常见错误是只写 text-indent: -2em，结果首行被切掉或叠在左侧元素上。正确做法是两者绑定使用：

text-indent 用负值（如 -2em）拉回首行
margin-left 用正值（如 2em）把整段右推，抵消首行外移
两值相等时，首行刚好回到原左边界，其余行缩进 2em

示例：.hanging { text-indent: -2em; margin-left: 2em; }

为什么不能只用 padding-left

padding-left 看起来能“缩进”，但它动的是整个块的内边距，不是首行。后果很直接：

所有行一起左移，首行没变化，达不到悬挂效果
若段落有背景色或边框，padding-left 的空白也会被染色，视觉突兀
和 text-indent 同时存在会叠加，调试时难以判断哪部分在起作用

真正需要整体位移（比如整段引用缩进），应优先用 margin-left；要控制首行，只能靠 text-indent。

Flex/Grid 容器里 text-indent 失效怎么办

当 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 在 display: flex 或 display: grid 的父容器中，且父容器设置了 align-items: center 或类似对齐方式时，text-indent 常常“看起来没反应”。这不是 bug，而是格式化上下文变了，基线计算被干扰。

解决方法有两个，按优先级排序：

给段落加 align-self: flex-start（Flex 场景）或 align-self: start（Grid 场景）
更稳妥的做法：放弃在子元素上用 text-indent，改由父容器统一用 padding-left 控制整体缩进，段落自身保持干净

别试图用 display: inline-block 强制触发块格式化——它会破坏流式布局，尤其在响应式场景下容易错位。

中文悬挂缩进要防标点外悬

用 text-indent: -2em; margin-left: 2em 做悬挂时，中文句号、引号、顿号等标点可能卡在行尾，视觉上“悬”在缩进区域之外，显得松散不紧凑。

这不是 CSS 写错了，而是浏览器排版引擎对中文标点的处理逻辑所致。目前没有通用属性能自动修正，但可以：

避免用固定像素（如 20px），改用 2ch 或 2em，让缩进宽度随字体实际字宽浮动
加 text-rendering: optimizeLegibility 微调渲染，部分 Chrome/Firefox 下略有改善
如果必须精确对齐（如学术参考文献），得接受手动微调 text-indent 值，比如从 -2em 改成 -1.8em，再配合 margin-left: 1.8em