Learn-HTML-CSS

Appearance

Return to top
On this page

CSS 行高

  • 行高的构成
  • 行高相关的现象和方案
  • 行高的调整

行高

在 CSS 中，行高（line height）指的是一行文字的高度，包括文字本身、上下文的空白区域以及行间距。行高的构成包括三个部分：

  • 文字本身

    文字本身指的是字体的高度和上下边界的空白区域。在 CSS 中，可以使用 font-size 属性来控制文字的大小。不同的字体和字号对应的文字高度可能不同。

  • 上下文空白区域

    上下文空白区域指的是文字上下方的空白区域，也称为上下行间距（leading）。它通常由两部分组成：

    • 上行高度（ascent）：文字基线（baseline）到顶部的距离。

    • 下行高度（descent）：文字基线到底部的距离。

    上下文空白区域的大小是由字体的度量（metrics）决定的。不同的字体和字号对应的度量可能不同。在 CSS 中，可以使用 line-height 属性来控制上下文空白区域的大小。如果未设置 line-height 属性，浏览器会根据字体和字号自动计算上下文空白区域的大小。

  • 行间距

    行间距指的是相邻两行文字的上下距离，它包括上面一行的下行高度和下面一行的上行高度。在 CSS 中，可以使用 line-height 属性来控制行间距的大小。行间距的大小通常是通过计算 line-height 属性的值和上下文空白区域的大小之和来确定的。

综上所述，行高的构成包括文字本身、上下文空白区域和行间距三个部分。理解行高的构成对于控制文本在页面中的布局和排版具有重要意义。

行高的构成

点击查看代码
html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>inline</title>
  <style>
    span { 
      background: red;
    }

    .c1 {
      line-height: 20px;
    }

    .c2 {
      line-height: 8px;
    }

    .c3 {
      line-height: 30px;
    }

    .c5 {
      line-height: 28px;
    }
  </style>
</head>

<body>
  <div> 
    <span class="c1">inline box xfg 中文</span>
    <span class="c2">inline box</span>
    <span class="c3">inline box</span>
    inline box
    <span class="c5">inline box</span>
  </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>inline</title>
  <style>
    span { 
      background: red;
    }

    .c1 {
      line-height: 20px;
    }

    .c2 {
      line-height: 8px;
    }

    .c3 {
      line-height: 30px;
    }

    .c5 {
      line-height: 28px;
    }
  </style>
</head>

<body>
  <div> 
    <span class="c1">inline box xfg 中文</span>
    <span class="c2">inline box</span>
    <span class="c3">inline box</span>
    inline box
    <span class="c5">inline box</span>
  </div>
</body>

</html>

  • 在 CSS 盒模型中，一个元素的高度是由内容区域、内边距和边框组成的。当一个元素包含多个子元素时，这些子元素会按照垂直方向一个接一个地排列，每个子元素的高度由其内容区域、内边距和边框决定，如果多个子元素的高度不同，那么它们的渲染高度也应该不同。

  • 然而，对于行内元素（inline elements），它们的高度不是由盒模型决定的，而是由行框模型（line box model）决定的。在行框模型中，一行文字会被放置在一个矩形框中，该矩形框的高度由其中包含的最高的行内框（inline box）决定，而行内框的高度又由其内容区域、内边距和边框决定。

  • 在这种情况下，如果每个 span 元素都是行内元素，且没有设置 display、vertical-align 等会影响行内框高度的属性，那么它们的渲染高度可能是相同的，尽管它们的实际高度不同。

  • 这是因为它们被放置在同一个行框 (line box) 中，该行框的高度由其中包含的最高的行内框 (inline box) 决定，而每个 span 元素的高度都没有超过该行框的高度。

  • 如果您想要让每个 span 元素的渲染高度和其实际高度相同，可以尝试设置它们的 display 属性为 block 或 inline-block，并为其设置 height 属性。这样每个 span 元素就会被渲染为独立的块级元素，其高度由 height 属性决定，不受行框模型的影响。

行高的调整

CSS 的 vertical-align 属性是用来控制元素在垂直方向上与其他元素的对齐方式。它可以被应用于 inline 元素、inline-block 元素、table-cell 元素和 table-row 元素上。

vertical-align 属性的取值：

  • baseline：默认值，将元素与其父元素的基线对齐。
  • top：将元素的顶部与父元素的顶部对齐。
  • middle：将元素的中心点与父元素的中心点垂直居中对齐。
  • bottom：将元素的底部与父元素的底部对齐。
  • text-top：将元素的顶部与父元素中的文本顶部对齐。
  • text-bottom：将元素的底部与父元素中的文本底部对齐。
  • sub：将元素的基线放置在父元素基线的下方，用于下标。
  • super：将元素的基线放置在父元素基线的上方，用于上标。
  • initial：将属性设置为默认值。
  • inherit：继承父元素的属性值。

需要注意的是，vertical-align 属性的值不是相对于页面的顶部或底部进行对齐，而是相对于父元素进行对齐。同时，该属性仅对行内元素和表格元素有效，对块级元素无效。

此外，当应用于表格元素时，vertical-align 属性对于不同元素的具体行为也会有所不同。

  • 对于 table-cell 元素，vertical-align 属性会将单元格内的内容垂直居中对齐；
  • 对于 table-row 元素，vertical-align 属性会将整个行垂直居中对齐。

最后，需要注意的是，当vertical-align属性应用于多个元素时，对齐方式是相对于它们之间的相对位置进行的。

行高相关的现象和方案

点击查看代码
html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>line-height</title>
  <style>
    .cc1 { 
      font-size: 12px;
    }

    .cc2 {
      font-size: 18px;
    }

    .cc3 {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div style="border:solid 1px red;"> 
    <span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
      居中
      xfg&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    </span>
  </div>
  <div class="c1">
    <span class="cc1">第一段</span>
    <span class="cc2">第二段</span>
    <span class="cc3">第三段</span>
  </div>
  <div style="background:red">
    <span>文字</span>
    <img src="test.png" />
  </div>
  <div>
    <div style="float:left">
      <span>第一段</span>
    </div>
    <div style="float:left">
      <span>第二段</span>
    </div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>line-height</title>
  <style>
    .cc1 { 
      font-size: 12px;
    }

    .cc2 {
      font-size: 18px;
    }

    .cc3 {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div style="border:solid 1px red;"> 
    <span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
      居中
      xfg&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    </span>
  </div>
  <div class="c1">
    <span class="cc1">第一段</span>
    <span class="cc2">第二段</span>
    <span class="cc3">第三段</span>
  </div>
  <div style="background:red">
    <span>文字</span>
    <img src="test.png" />
  </div>
  <div>
    <div style="float:left">
      <span>第一段</span>
    </div>
    <div style="float:left">
      <span>第二段</span>
    </div>
  </div>
</body>

</html>

行内元素默认对齐方式

行内元素默认以基线对齐，这意味着它们会留出空间以适应下方可能存在的文本。

图片下空白缝隙问题

当在 div 元素中包含一个图片时，可能会出现图片下方的空白间隙。这是由于图像本身被视为行内元素而不是块级元素。行内元素默认以基线对齐，这意味着它们会留出空间以适应下方可能存在的文本。

要解决这个问题，需要将图像设置为块级元素或使用 vertical-align 属性将其与基线对齐。这些方法中，将图像设置为块级元素更为常见。

css
.cover {
  display: block;
}

.cover {
  display: block;
}
css
.cover {
  vertical-align: bottom;
}

.cover {
  vertical-align: bottom;
}

这将使图像在 div 中成为块级元素，从而填满整个可用宽度，而不会留下空白间隙。