CSS 词条目录
前端Wiki/词条/line-height 行高

line-height 行高

定义设置行内内容(文字)的垂直行间距,决定一行文字基线之间的距离

行高是排版里最容易被忽视、但一眼就能看出「专业感」的属性。它接受无单位数字(推荐:如 1.5 表示字体大小的 1.5 倍)、长度值(px/em)和百分比。无单位数字会按自身字体大小计算并被子元素继承,是最常用也最不容易出错的写法。

行高小于 1 时多行文字会挤在一起,大于 2 则显得松散散漫。正文一般 1.5~1.8(阅读舒适区),标题可以收紧到 1.2~1.4。一个经典技巧:把单行容器设为 line-height 等于容器 height,即可实现文字垂直居中(只对单行有效,多行请用 flex)。

HTML
<style>
  .p { font-size: 16px; line-height: 1.8; }   /* 推荐:无单位、可继承 */
  .hi { font-size: 24px; line-height: 1.2; }  /* 标题收紧 */
  .mid { height: 60px; line-height: 60px;     /* 单行垂直居中 */
         border: 1px dashed #4a9eff; }
</style>
<p class="p">正文行高 1.8,阅读舒适,行与行之间留白充裕。</p>
<h3 class="hi">标题行高 1.2,紧凑有力</h3>
<div class="mid">单行垂直居中:line-height = height</div>
⚠ 常见误区
🔗 相关词条文本属性与行高单位 px em rem vw
← 返回来源章节文本属性