使用CSS ::first-letter伪选择器后如何消除首行下方多余空白

云上老周

2026-10-4

你问题里提到的::before-letter是拼写错误，正确的首字母伪元素选择器为::first-letter。

问题原因

首行下方出现多余空白的核心原因是：::first-letter放大字体后，默认行高会随字体大小同步变大，撑高了整个首行的高度，导致首行和下一行的间距超出预期。

可行解决方案

方案1：使用浮动实现首字下沉（最常用）
给::first-letter添加浮动属性，让首字母脱离常规文本流，不会参与首行行高计算，同时自然实现文字环绕效果，修改后的样式如下：

p::first-letter {
    font-size: 55px;
    padding-left: 30px;
    float: left;
    line-height: 1; /* 可根据实际字体效果在0.6-1之间微调 */
    margin-right: 4px; /* 可选：调整首字母和后续文字的水平间距 */
}

方案2：直接调整首字母行高（不需要首字下沉时用）
如果不需要首字下沉效果，仅要首字母放大且和同行文字对齐，可以直接缩小::first-letter的行高，配合垂直对齐属性控制位置：

p::first-letter {
    font-size: 55px;
    padding-left: 30px;
    line-height: 0.7; /* 可根据实际效果微调数值 */
    vertical-align: top; /* 可选：调整首字母和同行文字的垂直对齐位置 */
}