📏 CSS行高生成器

广告位 - 顶部 (728×90)

免费在线CSS行高(line-height)生成器。可视化调整行高数值,支持px、em、%和无单位值。实时预览多行文本效果,一键复制CSS代码。适合设计师和前端开发者优化网页文字排版和可读性。纯前端处理。

0.51.63.5
行高(line-height)是CSS中控制文本行与行之间垂直间距的重要属性。 合适的行高能显著提升文本的可读性和整体排版效果。 这段文字展示了当前设置的行高效果。你可以通过上面的滑块和选项自由调整。 关注行与行之间的间距,找到最适合你设计需求的值。 在网页设计中,通常正文使用1.5-1.8倍的行高,标题使用1.2-1.4倍。
广告位 - 中部 (728×90)

常见问题

line-height的无单位值和带单位值有什么区别?

无单位值(如1.5)是推荐用法,相对于当前字体大小的倍数,子元素会继承这个比例而不是计算后的具体值。带单位值(如24px)是固定值,继承时子元素会得到这个具体的px值,可能导致子元素行高不合适。百分比值(如150%)和无单位值类似,但继承时传递的是计算后的px值。

合适的行高值是多少?

一般正文内容的推荐行高为1.5-1.8倍字号,标题行高为1.2-1.4倍。太小的行高(<1.2)会导致文字拥挤,可读性差;太大的行高(>2.0)会让文字显得松散。移动端建议比桌面端稍大的行高以提升可读性。

line-height会影响布局吗?

是的,line-height会影响元素的实际高度。对于行内元素,line-height决定行框的高度。对于块级元素,如果未设置固定高度,line-height会影响整体高度。这也是经典水平垂直居中方法的基础:设置height和line-height为相同值。