CSS的line-height属性怎么设置行高？有什么作用？

line-height控制文本行间距，影响阅读体验和布局。解决方案有：1. 使用像素值（如24px）适用于固定字体大小场景；2. em/百分比相对于当前字体大小计算，但继承固定值可能导致子元素文本重叠；3. 推荐使用无单位数值（如1.5），能自动根据子元素字体大小调整行高，保持比例，尤其适合响应式设计；4. 设置line-height与height相等可实现单行文本垂直居中；5. 多行文本通过line-height调节段落紧凑度；6. 响应式设计中结合css变量、calc函数及媒体查询动态调整line-height，同时确保符合可访问性标准（如至少1.5）。

CSS的line-height属性，简单来说，就是控制文本行与行之间垂直距离的关键。它不光决定了文字看起来是紧凑还是疏朗，更是影响整个页面阅读体验和视觉平衡的幕后功臣。理解并恰当运用它，能让你的内容在屏幕上呼吸起来。

解决方案

设置line-height的方式有很多种，但每种都有其适用场景和需要注意的地方。最直接的，你可以给它一个具体的像素值（如24px），或者一个相对于当前字体大小的em或rem值（如1.5em）。但我个人最推荐的，也是在多数情况下最灵活和健壮的，是使用一个无单位的数值（比如1.5）。

当line-height被设置为一个无单位的数值时，它会乘以当前元素的font-size来计算出行高。举个例子，如果你的字体大小是16px，line-height设置为1.5，那么实际行高就是16px * 1.5 = 24px。这种方式的妙处在于，当你的字体大小因为响应式设计或其他原因发生变化时，行高也会等比例地自动调整，这对于保持文本的可读性和整体布局的协调性至关重要。

立即学习“前端免费学习笔记（深入）”；

你也可以用百分比（如150%），它也相对于font-size计算，但与无单位数值在继承行为上有所不同。normal是浏览器默认值，通常在1.2左右，但具体取决于浏览器和字体。

无论你选择哪种设置方式，line-height的值实际上是定义了“行框”（line box）的高度。这个行框是包裹着一行文本的隐形盒子。line-height分配给文本的空间，会均匀地分布在文本内容的上方和下方，形成我们看到的行间距。所以，如果你设置line-height为1.5，而字体大小是16px，那么文本自身占据的垂直空间可能只有16px，但它上下各会额外分到(24px - 16px) / 2 = 4px的空白。

line-height 设置为数值与单位有什么区别？为什么推荐使用无单位数值？

这确实是个老生常谈但又不得不提的问题。初学者常常在这里犯迷糊，导致布局出现意想不到的偏差。

首先，当我们把line-height设置为一个带单位的值，比如24px、1.5em、150%时，它会计算出一个具体的像素值，然后这个计算后的像素值会被子元素继承。这意味着，如果你的父元素font-size是16px，你设置line-height: 1.5em（计算后是24px），那么子元素无论font-size是多少，它继承到的行高都是固定的24px。想象一下，如果子元素的字体突然变得很大，比如30px，但行高还是24px，那文本肯定会重叠，惨不忍睹。

而当我们使用无单位数值，比如line-height: 1.5时，子元素继承的不是一个固定的像素值，而是这个乘数。这意味着，子元素会用它自己的font-size去乘以这个1.5。所以，如果父元素font-size是16px，line-height是1.5，子元素font-size是20px，那么子元素的实际行高就是20px * 1.5 = 30px。你看，它能自动适应字体大小的变化，保持一个相对的比例。

这就是为什么在绝大多数情况下，我都会推荐使用无单位数值。它提供了一种内在的弹性，让你的文本布局在面对字体大小调整时，依然能保持和谐和可读性。这尤其在响应式设计中显得尤为重要，你不需要在每个媒体查询里都去调整line-height，因为它们会随着font-size的变化而自然伸缩。这省去了很多重复劳动，也降低了出错的概率。

line-height 如何影响文本的垂直居中和布局？

line-height对垂直居中的影响，尤其是在单行文本元素中，简直是神来之笔。最经典的用法就是：当一个块级元素（比如一个按钮或者导航项）需要垂直居中显示一行文本时，你可以简单地将它的line-height值设置为与它的height值相等。

举例来说，如果你有一个div，height是40px，里面只有一行文字，你把line-height也设成40px，那么这行文字就会完美地在div的垂直方向上居中。这是因为line-height会将额外的空间均匀分配到文本的上下，当这个空间恰好填满元素的高度时，文本自然就居中了。这种方法对于简单的单行元素非常有效，而且比使用flexbox或grid来实现单行居中要简洁得多。

对于多行文本，line-height则直接决定了段落的紧凑度。一个较大的line-height会增加行间距，让段落看起来更“透气”，提高阅读舒适度，尤其是在长篇文章中。反之，过小的line-height会导致文字挤在一起，阅读起来会非常吃力。

此外，line-height还会影响内联元素（如或标签）与文本的垂直对齐。每个内联元素都有自己的“行框”，line-height决定了这个行框的高度。vertical-align属性就是在这个行框内部起作用的。如果你发现一个图标和旁边的文字无法完美对齐，很多时候调整line-height和vertical-align的组合就能解决问题。例如，当一个图片或图标与文字混合时，如果图片比文字高，line-height过小可能导致图片底部被截断，或者与下一行文字过于贴近。通过调整line-height，可以为这些内联元素提供足够的垂直空间，并配合vertical-align: middle等值，实现更协调的视觉效果。

在响应式设计中，line-height 的最佳实践是什么？

响应式设计不只是调整字体大小那么简单，line-height也必须跟着“响应”起来，才能真正提供无缝的阅读体验。我在实践中发现，有几种策略可以很好地应对不同屏幕尺寸下line-height的挑战。

首先，坚持使用无单位数值是基石。前面已经强调过它的好处，它让line-height能自动适应font-size的变化，这是响应式布局的天然优势。

其次，对于更精细的控制，可以考虑结合CSS自定义属性（CSS Variables）和calc()函数来创建更具流体性的line-height。你可以定义一个基准font-size和line-height，然后根据视口宽度或其他条件，动态调整这些变量。例如，可以设置--base-font-size和--base-line-height-ratio，然后font-size: calc(1rem + (2vw - 1rem) * 0.5);这样的流体字体大小，line-height则直接使用--base-line-height-ratio。这样，字体大小在不同视口下平滑过渡，line-height也随之平滑过渡，避免了在特定断点处突然跳变。

当然，媒体查询依然是不可或缺的工具。尽管无单位line-height提供了很好的通用性，但在某些极端情况下，比如在极小的手机屏幕上，你可能需要一个稍大的line-height来提高可读性；而在宽大的桌面屏幕上，为了让文字看起来不那么稀疏，可能需要稍微减小line-height。这种微调可以通过媒体查询针对性地覆盖。例如：

body {
  font-size: 16px;
  line-height: 1.6; /* 默认值，适用于桌面 */
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.7; /* 手机和平板，稍微增大行高 */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 1.8; /* 极小屏幕，进一步增大行高 */
  }
}

最后，但同样重要的是，要关注可访问性。WCAG（Web Content Accessibility Guidelines）通常建议正文内容的line-height至少为1.5倍的字体大小。这对于有阅读障碍或视力受损的用户尤其重要。在响应式设计中，无论屏幕大小如何变化，我们都应该确保line-height始终保持在一个对大多数用户都友好的范围内。在实际项目中，我会用工具测试不同设备上的可读性，而不是仅仅依赖视觉判断。毕竟，好的设计，是让每个人都能轻松获取信息。

以上就是CSS的line-height属性怎么设置行高？有什么作用？的详细内容，更多请关注php中文网其它相关文章！