📏 CSS Line Height Generator

Ad Space - Top (728×90)

Free online CSS line-height generator. Visually adjust line-height values with px, em, %, and unitless support. Real-time multi-line text preview, one-click copy CSS code. Perfect for designers and developers optimizing typography and readability. Client-side only.

0.51.63.5
Line height is a crucial CSS property that controls the vertical space between lines of text. Proper line height significantly improves readability and the overall typographic quality of your design. This preview shows the current line height setting. Adjust the slider and options above to find the perfect value. In web design, body text typically uses 1.5-1.8 line height, while headings use 1.2-1.4.
Ad Space - Middle (728×90)

FAQ

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为相同值。