::first-letter不支持vertical-align，因其非行内替换元素且不参与行盒基线计算，该属性被浏览器静默忽略；需通过line-height、font-size微调或改用包裹实现可控基线对齐。
首字母标签（::first-letter）不支持 vertical-align
直接给 ::first-letter 设置 vertical-align: baseline 无效——这个伪元素本身不是行内替换元素，也不参与行盒（line box）的基线计算，vertical-align 对它完全不起作用。浏览器会静默忽略该声明。
常见错误现象包括：::first-letter { vertical-align: baseline; } 写了但首字母位置毫无变化；或误以为加了就能和后续文字“基线对齐”，结果发现首字母反而下沉/上浮、与正文错位。
真正起作用的是字体度量和行高上下文：::first-letter 的垂直定位由其所在行的 line-height、父元素的 font-size 和所用字体本身的 ascender/descender 比例共同决定，而不是靠 vertical-align 调整。
::first-letter 基线对齐靠 line-height + font-size 微调
想让首字母视觉上“贴合”正文基线（比如避免下沉感），核心是控制它所在行的行盒高度和文字尺寸关系：
- 给包含
::first-letter的段落（<p></p>）设明确的line-height，例如line-height: 1.4，避免依赖浏览器默认值 -
::first-letter的font-size不宜过大（如3em以上），否则会撑高整行，导致基线被整体抬升；推荐2.2em–2.6em区间，兼顾可读性与对齐稳定性 - 若首字母仍显下沉，可尝试微调
vertical-align作用于其父级<span></span>或<p></p>（仅当该容器为inline或inline-block时才生效） - 不要用
margin-top或transform: translateY()硬拉——不同字号、不同字体（如“思源黑体” vs “Helvetica”）下偏移量不一致，响应式场景极易崩坏
真正需要基线对齐时，改用 <span></span> 包裹首字母
如果业务逻辑要求首字母必须严格按基线锚定（例如多语言混排、PDF 导出、高保真设计稿还原），::first-letter 天然不可控，应放弃伪元素，手动标记：
把首字母单独用 <span class="dropcap">A</span> 包裹，再对其应用可控样式：
.dropcap {
display: inline-block;
font-size: 2.4em;
line-height: 0.8; /* 压缩自身行高，减少对正文字行的影响 */
vertical-align: baseline; /* 此时生效：inline-block 元素支持 vertical-align */
margin-right: 0.1em;
}
这样做的优势：
-
vertical-align: baseline在inline-block上真实起效，且对齐基准是该<span></span>内部文本的基线 - 可配合
line-height和font-family显式控制，规避字体降部（descender）带来的浮动偏差 - 无障碍友好：屏幕阅读器能正确识别包裹结构，而
::first-letter是纯样式层，无语义
容易被忽略的关键点：字体差异会让基线偏移 1–2px
同一段 CSS，在 Chrome（用系统字体回退）和 Safari（倾向 WebKit 默认字体）中，::first-letter 的实际基线位置可能差 1–2px——这不是 bug，而是字体度量数据本身不同。比如“g”“y”“p”的 descender 高度在 Noto Sans 和 PingFang SC 中就不一致。
如果你正在做印刷级对齐（如电子书导出、设计系统规范），别只靠 line-height 估算。更可靠的做法是：
- 固定
font-family栈，避免回退到未知字体 - 用
height+line-height+padding组合替代单一样式控制 - 在关键场景下，用
clip-path或transform: translateY()做像素级补偿（仅限已知字体+固定环境）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
