line-height属性通过像素、em、百分比或无单位值控制文本行高，推荐使用无单位数值以避免继承问题；设置无效可能因优先级、元素类型、继承或其它属性干扰；当line-height等于元素高度时可实现单行文本垂直居中；建议最小值为1.5以提升可读性和可访问性。
通过 CSS 的
line-height属性，你可以直接控制文本行的高度。它接受多种类型的值，包括像素值、em 单位、百分比，甚至是无单位的数值。选择哪种方式取决于你的具体需求和设计目标。
解决方案
line-height属性允许你设置文本行之间的垂直空间。它影响着文本的可读性和视觉呈现，是 CSS 中非常重要的一个属性。
/* 使用像素值 */
p {
line-height: 20px;
}
/* 使用 em 单位（相对于字体大小） */
p {
line-height: 1.5em; /* 行高是字体大小的 1.5 倍 */
}
/* 使用百分比（相对于字体大小） */
p {
line-height: 150%; /* 行高是字体大小的 1.5 倍 */
}
/* 使用无单位数值（相对于字体大小） */
p {
line-height: 1.5; /* 推荐：行高是字体大小的 1.5 倍 */
}无单位数值是通常推荐的方式，因为它继承的是数值本身，而不是计算后的值。这在复杂的布局中可以避免一些潜在的问题。
立即学习“前端免费学习笔记（深入）”；
为什么
line-height设置无效？
有些时候，你可能会发现设置了
line-height但并没有生效。这通常有几个原因：
Sencha touch 开发指南 中文WORD版
下载
本文档主要讲述的是Sencha touch 开发指南；主要介绍如何使用Sencha Touch为手持设备进行应用开发，主要是针对iPhone这样的高端手机，我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助；感兴趣的
-
CSS 优先级问题： 检查是否有其他 CSS 规则覆盖了你的
line-height
设置。使用浏览器的开发者工具可以帮助你查看哪些 CSS 规则正在生效。 -
元素类型：
line-height
对行内元素（如<span>
）和块级元素（如<p>
）的影响可能不同。确保你的元素类型适合使用line-height
。 -
继承问题： 确保
line-height
没有被父元素的line-height
值覆盖。你可以尝试显式地为子元素设置line-height
。 -
其他 CSS 属性干扰： 某些 CSS 属性，如
height
或padding
，可能会影响元素的实际高度，从而影响line-height
的显示效果。
如何让文本垂直居中？
line-height还有一个巧妙的用法：当
line-height的值等于元素的高度时，单行文本就可以在元素中垂直居中。
.container {
height: 100px;
line-height: 100px; /* 文本垂直居中 */
}需要注意的是，这种方法只适用于单行文本。对于多行文本，你需要使用其他的垂直居中方法，例如 Flexbox 或 Grid。
line-height对可访问性的影响？
虽然
line-height主要用于视觉呈现，但它也对可访问性有影响。合适的
line-height可以提高文本的可读性，特别是对于有阅读障碍的用户。
通常建议
line-height的值至少为 1.5。这可以为文本行之间提供足够的空间，使文本更容易阅读。
另外，避免使用过小的
line-height值，这可能会导致文本行过于拥挤，难以区分。
