通过line-height属性调整文本行间距，推荐使用无单位数值以提升可读性与响应式适配，合理设置可优化排版美观与阅读体验。
在HTML和CSS中，调整文本行间距（也称为“行高”）主要通过 line-height 属性来实现。这个属性控制的是文本行与行之间的垂直间距，合理设置可以让内容更易读、排版更美观。
line-height 是最直接控制行间距的方式，可以在内联样式、内部样式表或外部CSS文件中使用。
常用值类型包括：示例：
p {
line-height: 1.6; /* 推荐做法 */
}
h1 {
line-height: 1.2;
}
.small-text {
line-height: 18px;
}
可以通过内联 style 属性快速设置某一段落或元素的行高。
立即学习“前端免费学习笔记（深入）”；
<p style="line-height: 2;">这是一段有较大行距的文字。</p> <div style="line-height: 1.4;">自定义行高的区块</div>
虽然方便，但建议将样式写在CSS中以保持结构与表现分离。
合理设置行高能显著提升阅读体验，尤其在大段文字中。
当父元素设置 line-height 为数字时，子元素会基于自己的字体大小重新计算行高；若设为固定值（如px），则不会按比例缩放。
例如：
body {
font-size: 16px;
line-height: 1.5; /* 子元素按自身字号乘以1.5 */
}
这样更灵活，适合响应式设计。
基本上就这些。掌握 line-height 的用法，能让你的网页文本看起来更专业、舒适。关键是根据内容类型选择合适的值，并优先使用无单位数值来保证可维护性和响应性。不复杂但容易忽略细节。
以上就是HTML文本行间距设置方法_HTML line-height行高调整技巧的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
收藏
