段落第一个字下沉是传统印刷排版中常见的设计形式，在网页开发中也能通过HTML结合CSS实现，单纯依靠HTML标签无法完成这个效果，需要借助CSS的伪元素和特定属性来达成。
核心实现原理
实现段落首字下沉主要依赖::first-letter伪元素，这个伪元素可以选中某个元素的第一個字母或者第一个汉字，然后对其单独设置样式。同时需要配合float属性让首字脱离普通文档流，再调整字体大小、行高、边距等属性，就能形成下沉的视觉效果。
基础实现代码示例
下面是一个最简单的首字下沉实现示例，针对所有<p>标签的段落生效：
/* 选中所有p标签的第一个字符 */
p::first-letter {
/* 让首字向左浮动，实现下沉的基础 */
float: left;
/* 首字字体大小，是普通文字的3倍 */
font-size: 3em;
/* 首字行高，调整垂直位置 */
line-height: 1;
/* 首字右边的外边距，避免和后续文字太挤 */
margin-right: 8px;
/* 可选：给首字设置加粗效果 */
font-weight: bold;
/* 可选：给首字设置不同颜色 */
color: #333;
}
对应的HTML结构非常简单，只需要正常的段落标签即可：
<p>这是一段测试文本，用于展示段落第一个字下沉的效果。我们可以看到第一个字会明显比其他文字更大，并且向下延伸，和后续的文字形成错落的排版效果，提升页面的阅读体验。</p> <p>这是第二段测试文本，同样会应用首字下沉的样式，第一个汉字会按照前面设置的CSS规则显示，整体排版更加美观。</p>
定制化场景调整
仅对特定段落生效
如果不需要所有段落都应用首字下沉，可以给目标段落添加类名，然后针对性设置样式：
<p class="drop-cap">这个段落会应用首字下沉效果，其他没有该类的段落不会生效。</p> <p>这个段落没有添加对应类名，所以不会显示首字下沉效果。</p>
/* 仅对带有drop-cap类的段落生效 */
.drop-cap::first-letter {
float: left;
font-size: 3.5em;
line-height: 1;
margin-right: 10px;
font-weight: bold;
color: #c0392b;
}
调整下沉深度
如果需要首字下沉更多行，可以通过调整font-size和line-height的比例来实现，也可以通过margin-bottom增加首字下方的边距，让下沉效果更明显：
p::first-letter {
float: left;
/* 更大的字体，下沉更多 */
font-size: 4em;
line-height: 0.8;
margin-right: 12px;
/* 增加下方边距，延长下沉距离 */
margin-bottom: 5px;
}
兼容性说明
::first-letter伪元素的兼容性非常好，主流的现代浏览器都支持，包括Chrome、Firefox、Safari、Edge等。如果是需要兼容非常老的IE浏览器，需要注意IE8及以下版本只支持单冒号的:first-letter写法，所以如果需要兼容旧IE，可以写成p:first-letter的形式，不过现在大部分项目已经不需要兼容这么旧的浏览器了。
注意事项
::first-letter伪元素只能选中元素的第一个字符，如果段落开头有空白字符，空白字符不会被选中，第一个有效字符才会被选中。- 如果段落开头是图片或者其他行内元素，
::first-letter可能不会生效，需要确保段落第一个内容是文本。 - 设置
float属性后，首字会脱离文档流，后续文字会围绕首字排列，这是实现下沉效果的核心，不要省略这个属性。
HTMLfirst_letterCSS段落首字下沉修改时间：2026-06-25 11:39:26