行高是排版里最容易被忽视、但一眼就能看出「专业感」的属性。它接受无单位数字(推荐:如 1.5 表示字体大小的 1.5 倍)、长度值(px/em)和百分比。无单位数字会按自身字体大小计算并被子元素继承,是最常用也最不容易出错的写法。
行高小于 1 时多行文字会挤在一起,大于 2 则显得松散散漫。正文一般 1.5~1.8(阅读舒适区),标题可以收紧到 1.2~1.4。一个经典技巧:把单行容器设为 line-height 等于容器 height,即可实现文字垂直居中(只对单行有效,多行请用 flex)。
<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>