::first-letter仅支持有限样式属性，因浏览器采用白名单机制，margin（除左右）、padding、width等布局属性被静默忽略；可靠生效的仅有font-*、color、float、line-height等装饰性属性。
为什么margin、padding、width在::first-letter里不生效
因为浏览器对::first-letter的样式支持是白名单制，不是所有块级属性都能用。它只允许影响“字形呈现”的有限属性，其他声明会被静默忽略——你写上也不会报错，但根本不会渲染。
常见被忽略的属性包括：margin-top、margin-left、padding、width、height、transform、display: flex。其中margin-right和margin-bottom在部分浏览器中能有限起作用，但行为不一致，不建议依赖。
真正能稳定生效的布局类属性只有：float（必须配合font-size才能实现下沉）、line-height（控制首字母自身行高）、vertical-align（微调垂直位置）。
float: left为什么是::first-letter里最关键的属性
它不是“可选效果”，而是让首字母脱离正常文本流、触发后续文字环绕的唯一可靠方式。没有float，font-size: 3em只会把首字母撑大，整段文字仍按原行高排布，视觉上毫无“下沉”感。
使用时要注意三点：
-
float: left必须和足够大的font-size（如2.5em以上）搭配，否则下沉不明显 -
line-height建议设为1或略小于1（如0.8），避免首字母自身行高把段落拉高 -
margin-right用来控制首字母和后续文字间距，0.2em～0.3em是较安全的起始值
为什么border-radius在某些浏览器里看起来有效，但实际不该用
旧版 Edge 和 IE 曾支持border-radius作用于::first-letter，但这属于非标准扩展，现代规范已明确移除。当前 Chrome/Firefox/Safari 均不支持，即使写了也无效。
如果你看到它“生效”，大概率是以下情况之一：
- 误用了
border（border-color等基础边框属性是支持的） - 元素本身有
background+padding，造成圆角错觉 - 调试工具误显示了被忽略的声明（检查 computed styles 才算数）
想加圆角？只能用 JS 提取首字母包一层span，再单独设样式——::first-letter这条路走不通。
父容器用了display: flex或grid，::first-letter直接消失
这不是 bug，是规范行为。::first-letter依赖块格式化上下文（BFC），而flex和grid容器会创建自己的格式化上下文，切断内部文本流的“首字母”识别路径。
修复方法很简单，但容易被忽略：
- 给目标段落（比如
p）显式加display: block，哪怕它本来就是 - 如果父容器必须是
flex，就不要把::first-letter写在子p上，改用inline-block包裹首字母再样式控制 - 绝对不要在
flex容器上直接写p::first-letter——它连解析都不会触发
最麻烦的是 CMS 输出内容不可控：比如<p><strong>Hello</strong> world</p>，首字符被<strong></strong>包住，::first-letter压根找不到“第一个文字字符”。这种时候，CSS 已经无能为力，得靠 JS 预处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
