CSS line-height 属性：精细控制段落垂直间距-html教程-PHP中文网

CSS line-height 属性：精细控制段落垂直间距

DDD

发布： 2025-09-15 14:35:01

原创

353人浏览过

CSS line-height 属性：精细控制段落垂直间距

本文将详细介绍如何使用 CSS 的 line-height 属性来精确控制段落文本的垂直行间距。当段落内容因容器限制而自动换行时，line-height 能够有效调整各行之间的距离，从而提升文本的可读性和视觉美观度。教程将提供代码示例，帮助开发者轻松实现自定义的行间距效果。

理解 line-height 属性

在网页布局中，我们经常会遇到文本内容在有限空间内自动换行的情况。此时，如果默认的行间距不合适，可能会导致文本过于紧凑或过于分散，影响阅读体验。css 的 line-height 属性正是为了解决这一问题而设计的，它用于设置行框的高度，从而控制文本行之间的垂直距离。

简单来说，line-height 定义了文本基线之间的距离。一个合适的 line-height 值能够显著提升文本的可读性，使读者更容易跟随文本流。

line-height 值的类型与应用

line-height 属性支持多种类型的取值，每种类型都有其特定的行为和适用场景：

normal (默认值): 浏览器根据元素的字体大小自动计算行高，通常在 1.0 到 1.2 之间，具体取决于浏览器和字体。
<number> (无单位数字): 这是一个推荐的用法。行高将是元素 font-size 的指定倍数。例如，line-height: 1.5; 表示行高是字体大小的 1.5 倍。这种方式的优点是，当字体大小改变时，行高也会按比例调整，保持一致的视觉效果。
<length> (带单位的长度): 可以使用 px (像素), em (相对于父元素字体大小), rem (相对于根元素字体大小) 等单位来设置固定的行高。例如，line-height: 20px;。这种方式适用于需要精确控制固定行高的场景，但可能在字体大小变化时导致不协调。
<percentage> (百分比): 行高是元素 font-size 的指定百分比。例如，line-height: 150%; 等同于 line-height: 1.5;。

在实际开发中，通常推荐使用无单位数字 (<number>)，因为它提供了更好的可伸缩性和可维护性。

示例代码：调整段落行间距

假设我们有一个包含多行文本的段落 <p> 元素，并且希望增加其行间距以提高可读性。以下是一个典型的 HTML 结构和 CSS 样式：

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

美间AI

美间AI：让设计更简单

查看详情

<div class="testimonials-container">
    <div class="Test1">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="date">8 months ago</span>
        <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
        <p>-Andrew M.</p>
    </div>
    <div class="Test2">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="date">2 months ago</span>
        <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
        <p>-Kenneth W.</p>
    </div>
    <div class="Test3">
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star checked"></span>
        <span class="fa fa-star"></span>
        <span class="fa fa-star"></span>
        <span class="date">2 days ago</span>
        <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
        <p>-Regina T.</p>
    </div>
</div>

<style>
.testimonials-container {
    margin-top: 3em;
    width: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.testHeading {
    text-align: center;
    margin-top: 2em;
}

.test {
    text-align: left;
    text-indent: 2em;
    /* 初始样式，可能导致行间距过窄 */
}

.checked {
    color: orange;
}

.date {
    margin-left: 1em;
}

p {
    margin: 10px 0;
}
</style>

登录后复制

在上述代码中，.test 类应用于包含长文本的段落。如果默认行高导致文本行过于紧密，我们可以通过修改 .test 类的 CSS 来调整：

.test {
    text-align: left;
    text-indent: 2em;
    line-height: 1.6; /* 使用无单位数字，通常能提供良好的可读性 */
    /* 您也可以尝试其他值，例如：
    line-height: 24px;  /* 固定像素值 */
    line-height: 160%; /* 百分比值 */
    */
}

登录后复制

通过将 line-height 设置为 1.6，段落中的文本行间距将是其字体大小的 1.6 倍，从而显著改善了文本的视觉分隔和可读性。您可以根据实际设计需求调整这个数值。

使用 line-height 的最佳实践

优先使用无单位数字： line-height: 1.5; 这种形式最为灵活，它会根据元素的 font-size 自动调整行高，确保无论字体大小如何变化，行高与字体大小的比例始终保持一致，从而提高设计的一致性和响应性。
考虑可读性： 对于大多数正文文本，1.4 到 1.8 之间的 line-height 值通常能提供最佳的可读性。具体值取决于字体类型、字体大小和行宽。行宽越长，通常需要更大的 line-height 来帮助读者从一行过渡到下一行。
继承性： line-height 属性是可继承的。这意味着如果您在一个父元素上设置了 line-height，其子元素（除非被明确覆盖）也会继承这个值。利用这一特性可以在全局或特定区域统一文本的行高。
避免极端值： 过大或过小的 line-height 都会损害可读性。过小会使文本挤在一起，难以区分行；过大则会使文本显得松散，难以形成连贯的阅读流。

总结

line-height 属性是 CSS 中一个强大且常用的排版工具，它允许开发者精确控制文本行的垂直间距。通过合理利用 line-height，我们可以有效解决文本换行后行间距不当的问题，极大地提升网页文本的视觉舒适度和阅读体验。掌握其不同取值类型及其最佳实践，将帮助您创建更加专业和用户友好的网页内容。

以上就是CSS line-height 属性：精细控制段落垂直间距的详细内容，更多请关注php中文网其它相关文章！