text-indent在段落开头有图片时“没反应”，是因为浏览器将<img>视为首行起始位置，缩进作用于图片左侧而非文字；给<img>设display:inline-block并配合vertical-align可修复，但更稳妥的方案是用padding-left替代。
为什么 text-indent 在段落开头有图片时没反应
不是 CSS 写错了，而是浏览器把 <img> 当作了“首行”的起始位置——缩进确实发生了，但作用在图片左边，视觉上等于没动。这种情况常见于图文混排的新闻正文、CMS 输出内容或富文本编辑器导出的 HTML。
display: inline-block 能解决吗？能，但要加对地方
给 <p> 设 display: inline-block 本身不解决问题，反而会让段落失去块级流行为（比如自动换行、垂直间距异常）。真正该加 display: inline-block 的是图片本身：
- 给
<img>加display: inline-block，它就不再“抢占首行起点”，text-indent会正常作用于文字第一字符 - 同时补上
vertical-align: top或middle，避免基线错位导致段落上下跳动 - 如果图片是浮动的（
float: left），text-indent本就不该生效——那是布局问题，该用margin-left控制文字环绕间距
更稳妥的替代方案：不用 text-indent，改用 padding-left
当段落结构不可控（比如 CMS 插入了各种内联元素），硬调 text-indent 容易反复踩坑。直接用 padding-left 更可靠：
-
padding-left: 2em对任何display类型都生效，包括flex/grid子项 - 不会被
white-space: nowrap或text-align: justify干扰 - 需注意：如果段落有背景色或边框，
padding-left会让整个块左移，而text-indent只推文字——这点差异会影响设计还原度
检查是否真被覆盖，别猜，用开发者工具看 computed 样式
很多“失效”其实是样式被覆盖，而不是逻辑错误：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中段落，切到
Computed面板，搜text-indent——确认值是不是0px或initial - 常见覆盖源：
normalize.css、reset.css、富文本编辑器输出的style="text-indent: 0"、某些 UI 框架的全局p重置规则 - 临时加
!important是调试手段，不是解决方案；真实项目里优先加 class（如.paragraph-indent）并提高选择器权重
真正难处理的不是怎么写 text-indent，而是段落开头混着 <svg>、<span>、<strong> 甚至零宽空格时，浏览器对“首行”的判定已经脱离直觉。这时候与其死磕语义，不如用 padding-left 快速对齐视觉目标。
