本文旨在解决HTML元素（特别是文本元素）之间由于默认行高导致的垂直间距问题。通过调整CSS的line-height属性，可以精确控制文本行的高度，从而消除不必要的空白，实现更紧凑的布局。本文将提供详细的步骤和示例代码，帮助开发者理解和应用line-height属性，打造更精致的网页排版。

在HTML页面开发中，我们经常会遇到元素之间存在意料之外的垂直间距，尤其是在使用标题（

到

）等默认带有一定样式的元素时。这些间距往往并非由margin或padding属性引起，而是由元素的line-height（行高）属性控制。 默认情况下，浏览器会为文本元素设置一个大于字体大小的line-height，以便文本更易于阅读。 然而，在某些情况下，我们可能需要消除这些额外的间距，以实现更紧凑的布局。本文将介绍如何通过调整line-height属性来精确控制元素之间的垂直间距。

理解 line-height 属性

line-height属性用于设置文本行的高度。 它可以接受多种类型的值：

• 数字: 行高是当前字体大小的倍数。 例如，line-height: 1.5; 表示行高是字体大小的1.5倍。
• 长度: 行高是一个固定的长度值，例如 px、em、rem等。 例如，line-height: 20px; 表示行高为20像素。
• 百分比: 行高是当前字体大小的百分比。 例如，line-height: 120%; 表示行高是字体大小的120%。
• normal: 这是默认值，浏览器会根据字体大小自动计算行高。

消除垂直间距的实践

要消除元素之间的垂直间距，通常需要将line-height设置为 1 或 100%。 这表示行高与字体大小相同，从而消除额外的空白。

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

示例代码：

假设我们有以下HTML结构：

<h1 class="title">Text 1</h1> <div class="simple">   <h2 class="title_big">its simple!</h2>   <div class="line"></div> </div> <h2 class="title">Text 2</h2>

以及以下CSS样式：

* {   box-sizing: border-box;   margin: 0;   padding: 0; }  .title {   font-family: Roboto;   font-size: 41px;   font-weight: 900;   text-transform: uppercase;   color: #f9bf3b;   text-align: center; }  .simple .title_big {   font-family: Roboto;   font-size: 80px;   font-weight: 900;   text-transform: uppercase;   color: #000000;   text-align: center; }

为了消除

和

元素之间的默认垂直间距，我们可以添加以下CSS规则：

h1.title, h2.title_big {   line-height: 1; }

通过将line-height设置为 1，我们确保标题的行高与其字体大小相同，从而消除了额外的垂直间距。

注意事项

• 继承性： line-height 属性具有继承性。 这意味着如果在一个父元素上设置了line-height，它的子元素也会继承该值。 因此，在设置line-height时，需要考虑其对子元素的影响。
• 文本可读性： 虽然消除垂直间距可以实现更紧凑的布局，但也需要注意文本的可读性。 如果行高太小，文本可能会显得拥挤，影响阅读体验。
• 不同字体： 不同的字体可能具有不同的默认行高。 因此，在应用line-height属性时，需要根据具体的字体进行调整。

总结

通过调整CSS的line-height属性，我们可以精确控制HTML元素之间的垂直间距，从而实现更紧凑、更精致的网页排版。 在实际开发中，需要根据具体的需求和设计，灵活运用line-height属性，并注意文本的可读性，以达到最佳的视觉效果。