免费在线CSS行高（line-height）生成器。可视化调整行高数值，支持px、em、%和无单位值。实时预览多行文本效果，一键复制CSS代码。适合设计师和前端开发者优化网页文字排版和可读性。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用免费在线CSS行高（line-height）生成器。可视化调整行高数值，支持px、em、%和无单位值。实时预览多行文本效果，一键复制CSS代码。适合设计师和前端开发者优化网页文字排版和可读性。纯前端处理。
0.51.63.5
行高（line-height）是CSS中控制文本行与行之间垂直间距的重要属性。
合适的行高能显著提升文本的可读性和整体排版效果。
这段文字展示了当前设置的行高效果。你可以通过上面的滑块和选项自由调整。
关注行与行之间的间距，找到最适合你设计需求的值。
在网页设计中，通常正文使用1.5-1.8倍的行高，标题使用1.2-1.4倍。
常见问题
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为相同值。
如何使用CSS行高生成器
使用CSS行高生成器非常简单：
-
输入数值
在计算器字段中输入所需的数字和参数。每个字段都有清晰的标签——直接输入数值或使用微调控制调整。 -
配置选项
选择任何附加选项，如计算模式、货币、时间段或精度。改变数值时计算器会自动更新。 -
查看计算结果
计算结果立即以清晰的格式显示。可以复制结果或调整输入值查看不同场景的影响。