上一篇
html每段文字行高
HTML段落行高通过CSS的
line-height属性设置，可指定数值（如1.5）、像素（如20px）或相对单位（如1.5em），该属性控制文本行垂直间距，影响段落内文字间距与可读性，支持继承或针对特定标签（如`
行高的定义与作用
行高（Line Height）是指文本行与行之间的垂直距离，直接影响文字的垂直间距和阅读体验，在HTML中，行高可通过CSS的line-height属性控制，默认值通常为normal（由浏览器决定）。
CSS中设置行高的方法
| 方法 | 示例代码 | 说明 |
|---|---|---|
| 数值 | p { line-height: 1.5; } | 无单位数值，表示倍数（如1.5倍字体大小）。 |
| 百分比 | p { line-height: 150%; } | 基于字体大小的百分比，效果同数值。 |
| 长度单位 | p { line-height: 24px; } | 固定值（如像素），不受字体大小影响。 |
| 继承与默认 | p { line-height: normal; } | 恢复浏览器默认行高逻辑。 |
行高的继承性
- 特点：
line-height是继承属性，子元素会继承父元素的行高值。 - 示例：
<p style="line-height: 1.8"> 父段落行高1.8倍 <span>子元素同步行高</span> </p>
常见问题与解决方案
行高设置不生效
- 原因：选择器优先级不足、单位错误（如遗漏
px）、被其他样式覆盖。 - 解决：检查CSS权重，确保单位正确，使用
!important或更高优先级选择器。
- 原因：选择器优先级不足、单位错误（如遗漏
行高过大导致布局错乱
- 原因：固定单位（如
px）未适配字体大小，或数值过大。 - 解决：优先使用相对单位（如
em或无单位数值），配合响应式设计。
- 原因：固定单位（如
行高与段落间距的区别
| 属性 | 作用范围 | 示例 |
|---|---|---|
line-height | 控制行内文本的垂直间距 | 同一段落内行与行的间距。 |
margin | 控制段落与段落/元素的间距 | p { margin-bottom: 20px; } |
相关问题与解答
问题1：如何让网页中所有段落默认行高为1.5？
解答：通过全局选择器设置默认行高：
body {
line-height: 1.5;
} 此样式会被段落<p>继承，无需单独定义。
问题2：为什么设置了line-height: 2，但文字间距没有变化？
解答：可能原因：
- 字体大小过小（如
font-size: 10px），导致行高倍数效果不明显。 - 样式未正确应用到目标元素（如选择器错误）。
- 其他CSS属性（如
display: inline）干扰
