::first-line 伪元素不支持 margin、padding 等盒模型属性，无法实现首行缩进；text-indent 是唯一标准、可靠且语义正确的解决方案，专为此设计，兼容性好且不影响布局流。

用 ::first-line 不能实现首行缩进装饰

直接说结论：::first-line 伪元素**不接受 margin、padding、width、height 等盒模型属性**，所以想靠它加缩进（比如 margin-left: 2em）是无效的。浏览器会忽略这些声明，你不会看到任何变化。

它只支持有限样式：颜色、字体、背景、文本修饰类（text-decoration、letter-spacing 等），以及 line-height（部分场景下有副作用）。

text-indent 是正解，不是“退而求其次”

给段落首行加缩进，唯一标准、可靠、语义正确的方式就是用 text-indent。它专为此设计，兼容性好（所有浏览器都支持），且不影响布局流。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• text-indent 的值可以是 em（推荐，相对字体大小）、rem、px，甚至负值（用于悬挂缩进）
• 它只作用于第一行的**文字内容起始位置**，不改变盒子尺寸，也不触发重排（相比 padding-left 更轻量）
• 注意：如果段落内有 display: inline-block 或浮动元素提前占位，text-indent 可能失效——这时要检查是否被其他元素干扰了“首行”的计算边界

为什么有人误试 ::first-line + margin？常见混淆点

这个错误通常来自两个误解：

• 把 ::first-line 当成一个可定位的“容器”，以为能像普通元素一样推移它；实际上它只是对首行文本的样式覆盖层
• 看到某些文章里用 ::first-line 改变首行颜色或加下划线，就顺延推测“那加缩进应该也行”，但 CSS 规范明确限制了它的样式能力
• 在 DevTools 里手动给 ::first-line 加 margin-left，看起来“好像生效了”——其实是 DevTools 的渲染误导，实际刷新后无效

需要“装饰性缩进”？绕不开的现实约束

如果你真想要带图标、边框、背景色等的“装饰性首行缩进”，text-indent 本身做不到，但也不必硬套 ::first-line。可行路径只有两个：

• 用 padding-left + text-indent: -2em 模拟：左侧留空，再把文字左移回去，让空白区“看起来像缩进”——但要注意 padding 会影响段落整体宽度和换行逻辑
• 用 ::before 伪元素绝对定位到段首：设 content: ""，控制宽高/背景/图标，再用 position: absolute 和 left 定位。缺点是需确保父段落 position: relative，且对多行首行、换行断点敏感

真正难的不是写法，而是“装饰”和“语义排版”的权衡——浏览器对首行的定义很严格，任何试图绕过 text-indent 主干逻辑的做法，都会在响应式、字号缩放或屏幕阅读器支持上暴露问题。

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