等）或直接应用于文本元素（如）。它会影响该元素内部所有文本行的垂直高度。

通常，我们会这样来定义它：

p {
  line-height: 1.6; /* 无单位值，推荐 */
}

h1 {
  line-height: 1.2em; /* 相对单位 */
}

.button {
  line-height: 40px; /* 绝对单位，常用于单行文本垂直居中 */
}

line-height接受多种值：

• normal: 这是浏览器默认值，通常在1.0到1.2之间，具体取决于浏览器和字体。
• number (无单位): 这是最推荐的方式。它是一个乘数，表示line-height是元素font-size的多少倍。例如，line-height: 1.5;意味着行高是字体大小的1.5倍。这种方式的好处是，当字体大小改变时，行高也会按比例自动调整，非常适合响应式设计。
• length (绝对单位): 例如px、em、rem。line-height: 20px;会使行高固定为20像素。使用绝对单位时要小心，因为它不会随字体大小的变化而缩放，可能导致大字体时文字重叠，或小字体时间距过大。
• % (百分比): 相对于元素自身的font-size。例如，line-height: 150%;与line-height: 1.5;效果类似，但继承行为略有不同（百分比值会先计算成具体像素值再继承，而无单位值直接继承乘数）。

line-height与font-size、padding、margin有什么区别和联系？

这几个CSS属性，初学者确实容易混淆它们在布局和间距上的作用，但它们各有侧重，解决的问题也大不相同。

简单来说，line-height关注的是文本行内部的垂直空间，它定义的是每一行文本占据的“盒子”的高度。你可以想象一下，每一行文字都坐在一个隐形的盒子里，这个盒子的高度就是line-height决定的。文字本身在盒子内是垂直居中的（默认行为），盒子上下多出来的空间就是所谓的“半行距”（half-leading）。所以，它主要影响的是行与行之间的视觉距离，以及单行文本在自身高度内的垂直对齐。

font-size就直接多了，它决定的是文字字符本身的大小。line-height很多时候会参照font-size来设定，比如我们常说的line-height: 1.5;，就是行高是字体大小的1.5倍。它们是相辅相成的，字体大，通常行高也需要相应增大，以保持良好的阅读体验。

而padding和margin，它们属于CSS盒模型的一部分，关注的是元素盒子之间或盒子内部的空间。padding是在元素内容与边框之间增加的内边距，它会增加元素的实际可视区域大小，并且背景色也会延伸到padding区域。margin则是在元素边框外部增加的外边距，用于控制元素与周围其他元素之间的距离。

我个人在实践中发现，很多时候人们会尝试用padding-top或padding-bottom来调整文本的行间距，但那通常是错误的做法。padding会把整个元素的盒子撑大，而line-height则更精细地控制了文本行自身的垂直间距。如果你想调整两段文字之间的距离，那用margin是正确的；如果你想让一行文字在某个容器里上下居中，并且这个容器高度固定，那么把line-height设为容器高度，确实是个常用的“小技巧”，但要记住，这仅限于单行文本。

为什么推荐使用无单位的line-height值？它在响应式设计中有什么优势？

在前端开发中，我几乎总是推荐使用无单位的line-height值，比如line-height: 1.6;。这并非没有理由，它背后蕴含着对可维护性和响应式设计的深刻考量。

主要原因在于其继承行为。当line-height被设置为一个无单位的数字时，它会被子元素继承为一个乘数，而不是一个固定的像素值。这意味着，如果你的body元素设置了line-height: 1.6;，那么所有后代元素（比如h1、p、li等）的行高都会是它们各自font-size的1.6倍。

举个例子，假设你的body字体大小是16px，h1字体大小是32px。如果line-height设置为1.6：

• body内的普通文本行高就是 16px * 1.6 = 25.6px。
• h1的行高就是 32px * 1.6 = 51.2px。

你看，它们都保持了相同的比例关系。

这在响应式设计中尤其重要。我们经常会根据屏幕尺寸调整字体大小，例如在小屏幕上字体会变小，在大屏幕上字体会变大。如果你的line-height是固定像素值（比如20px），那么当字体变大时，20px的行高可能就显得太小，导致文字重叠；而字体变小时，20px又可能显得过于宽松。

使用无单位的line-height就完美解决了这个问题。无论font-size如何变化，行高都会自动按比例缩放，从而保持视觉上的和谐与一致的阅读节奏。这大大减少了在不同断点（breakpoints）下调整行高的工作量，让你的CSS更简洁，也更健壮。这是一种“设置一次，处处适用”的优雅解决方案，真正体现了CSS的层叠和继承的强大之处。

line-height在实际开发中可能遇到哪些常见问题或“坑”？

在实际的项目开发中，line-height虽然看起来简单，但确实有一些常见的“坑”和需要注意的地方，尤其是在追求像素级完美或处理复杂布局时。

一个经典的“坑”就是单行文本的垂直居中。很多开发者会把line-height设置为与容器高度相同的值，来让单行文本在垂直方向上居中。比如，一个按钮高40px，你设置line-height: 40px;。这确实能达到效果，但问题在于，一旦文本内容溢出变成两行，布局就会立刻混乱，因为line-height的本质是控制每行的高度，而不是元素盒子的整体垂直对齐。我通常会建议，对于多行文本或需要更精确垂直居中的场景，考虑使用Flexbox或Grid布局，它们提供了更强大和语义化的垂直对齐能力。

另一个让人头疼的问题是继承的意外。前面提到了无单位line-height的优点，但如果你不小心给某个父元素设置了绝对单位的line-height（比如line-height: 20px;），那么这个固定值会直接继承给所有子元素。如果子元素的font-size远大于20px，那么文字就会直接重叠在一起，非常难看。这种情况下，你需要在子元素上重新设置一个合适的line-height，或者从一开始就避免在父级使用绝对单位。我见过不少新手在调试这种问题时，花了很多时间才发现是父元素的line-height设置不当。

还有就是对行内元素背景的影响。line-height决定了文本行的“盒子”高度。如果你给一个标签设置了背景色，你会发现背景色会填充整个line-height的高度，而不仅仅是文字本身的高度。这意味着，即使你的文字很小，如果line-height很大，那么背景色也会显得很高，这在设计上可能不是你想要的效果，尤其是在做一些高亮文本或链接样式时需要特别注意。

最后，不得不提的是可访问性（Accessibility）。line-height过小会导致文字挤在一起，对于有阅读障碍（如阅读障碍症）的用户来说，阅读体验会非常差。WCAG（Web内容可访问性指南）建议，对于正文文本，line-height至少应为1.5。过大的line-height虽然不会导致重叠，但会使页面显得稀疏，降低信息密度，增加滚动次数。所以，找到一个平衡点，既美观又易读，是设计时需要深思熟虑的。通常，1.5到1.8是一个比较安全的范围。

以上就是《HTML中line-height属性详解与应用》的详细内容，更多关于的资料请关注golang学习网公众号！