在网页内容排版场景中，首字下沉是经典的文字美化效果，能够增强段落的视觉层次感，让读者快速定位内容起始位置。实现这个效果不需要修改原有的HTML结构，借助CSS的first-letter伪元素就能轻松完成。
什么是first-letter伪元素
first-letter是CSS提供的伪元素之一，它可以选择指定元素的第一个文字，或者第一个字母，并且仅为这个被选中的第一个字符设置独立的样式，不会影响其他文字的默认样式。这个伪元素只能应用在块级元素上，比如<p>、<div>、<article>这类标签，行内元素无法直接使用。
首字下沉的核心实现逻辑
首字下沉的本质是让段落的第一个字符比其他文字更大，同时让后续文字围绕这个大字符排列。要实现这个效果，需要给first-letter伪元素设置三个核心属性：
- float属性：设置为left，让首字向左浮动，后续文字会自动环绕在它的右侧和下方
- font-size属性：设置比正文更大的字体尺寸，通常为正文字体的2到3倍
- margin属性：调整首字和周围文字的间距，避免文字过于紧凑
完整代码示例
下面是一个可直接运行的首字下沉实现代码：
/* 正文段落默认样式 */
p {
font-size: 16px;
line-height: 1.8;
color: #333;
margin: 0 0 20px 0;
}
/* 首字下沉样式 */
p::first-letter {
float: left;
font-size: 48px;
line-height: 1;
margin-right: 8px;
margin-top: 4px;
color: #2c3e50;
font-weight: bold;
}
对应的HTML结构只需要普通的段落标签即可：
<p>CSS是实现网页样式控制的核心技术，通过不同的选择器和属性组合，可以创造出丰富的视觉效果。首字下沉作为排版中的常用技巧，能够提升内容的阅读体验，让页面更具设计感。</p>
常见问题及解决方法
首字下沉后文字对齐异常
如果首字的垂直对齐位置不符合预期，可以调整first-letter伪元素的line-height和margin-top属性，缩小line-height可以让首字更靠近文字顶部，margin-top可以微调首字的垂直偏移量。
首字样式不生效
首先检查选择器对应的元素是不是块级元素，如果是行内元素比如<span>，需要先给它设置display: block或者display: inline-block。其次确认first-letter伪元素的语法是否正确，必须是双冒号写法，单冒号在部分旧版本浏览器中可能无法识别。
首字周围文字间距不合理
可以通过调整margin-right控制首字右侧和文字的间距，margin-bottom控制首字下方和文字的间距，根据实际视觉效果微调数值即可。
注意事项
first-letter伪元素只能选择元素的第一个字符，如果段落开头有图片或者其他行内元素，首字选择可能会受到影响。另外如果段落设置了text-align: justify两端对齐，首字下沉后可能需要单独调整首字的text-align属性，避免对齐效果异常。
CSSfirst-letter伪元素首字下沉文字排版修改时间：2026-06-19 03:24:26