CSS 行高工具

输入字号与行高,在「倍数(无单位)、像素、百分比」之间即时互换,实时预览行距效果,并一键复制生成的 line-height CSS 代码。行高决定每一行文字基线之间的距离,是正文可读性的关键。

行高参数 已就绪
字号(px)
行高单位
行高数值
倍数(无单位)1.5
像素行高24px
百分比150%

切换行高单位时会按当前字号自动换算数值;三种单位在字号相同时表示相同的行距。

实时预览与代码

行高决定每一行文字基线之间的距离。较大的行高让正文更易读,较小的行高则更紧凑。Line-height also affects how text flows across multiple lines.


          

生成的 CSS 将显示在这里。

使用规则
  • 换算关系:像素行高 = 字号 × 倍数,百分比 = 倍数 × 100%。
  • 无单位倍数是最推荐的行高写法,可避免继承缩放问题。
  • 行高小于字号时文字可能重叠,需谨慎使用。
  • 行内元素的高亮背景高度由行高决定。
  • 本工具完全在浏览器本地运行,输入数据不会上传到任何服务器。