CSS | line-height 与 vertical-align详解

文章目录

• 行框高度 line-height

• • 定义

  • 属性取值

  • • 百分比与数字的区别

  • 行高计算规则

• 基准 baseline

  • 行间距（Leading）与半个行间距
  • 垂直居中的定义通常指的是元素在垂直方向上的对齐方式。
    • 常见取值 inline-block情况下的特殊处理方式通常包括但不限于以下几种情况：
      • 行间距为零时的垂直居中显示
      • 半个行间距时的垂直对齐效果
      • 其他特定场景下的调整策略

行框高度 line-height

定义

对于一个行内元素来说, line-height决定了其在行高计算中所占有的高度值。
行内非替换盒的垂直内边距由内容区的顶部和底部开始计算,并与其无关；而line-height仅用于计算行框的高度。

对于由相关属性决定的块容器内元素排列方式来说，“line-height”参数指定了其内部每个单元格的高度下限。这一值通常包括两个部分：基线上方的最小可用高度以及下方的最大可用深度。例如，在某些情况下，默认设置会根据字体大小动态调整这一参数的具体数值。
如需进一步了解此概念，请参考相关CSS文档或技术资源。

属性取值

属性值含义如下：

百分比与数字的区别

文档中的指定数值、计算所得数值以及应用数值的表述略显晦涩。我们可以采用更加直观易懂的语言具体说明使用百分比和数字赋值之间的差异。

• 当百分比样式被应用时，具体线高（line-height）值会通过计算父元素的 font-size 与指定的百分比值得出具体的线高数值，并将其设置为子元素继承使用的线高值。除非子元素自行更改其 font-size 属性。
• 当使用固定数值样式时，则会直接将该具体数值指定为子元素继承使用的线高值。每个层级下的子元素会根据自身的 font-size 乘以指定倍率来计算实际的线高数值。

通过将百分比数值分配给橙色区域，并使用数字（倍数）来指定淡蓝色区域。由于采用固定比例设置导致line-height参数被子元素继承固定数值这一做法，在某些情况下会引发显示不一致的问题。然而，在应用倍数赋值时则能够避免此类情况的发生。这种区别的设定方法有助于避免因不同赋值方式导致的显示异常问题。

        .percent {
            font-size: 20px;
            line-height: 100%;
    
            margin: 40px;
            padding: 20px;
            border: orange dotted;
        }
    
        .number {
            font-size: 20px;
            line-height: 1;
    
            padding: 20px;
            margin: 40px;
            border: skyblue dotted;
    
        }
    
        span {
            font-size: 50px;
        }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

    <div class="percent">
        <span>On a block container element whose content is composed of inline-level elements, 'line-height' specifies
            the minimal
            height of line boxes within the element. </span>
    </div>
    <div class="number">
        <span>On a block container element whose content is composed of inline-level elements, 'line-height' specifies
            the
            minimal
            height of line boxes within the element. </span>
    </div>
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

行高计算规则

行框的高度由下列规则决定：

在某一元素包含多种字体呈现的文本时，在线编辑器会通过计算该元素的最大字体大小来确定其常规line-height属性值。

在确定每个行内级盒的高度时，在替代表格单元格的情况下（即inline-block类型的表格外），依据其外边距框（margin box）所设定的高度进行计算；而对于非替代表格单元格的块级元素，则按照各自独立设置的line-height值来确定高度。

如图所示，在表格单元格中插入新单元格时会触发附加边距box（ margin box）参与总计高估计算。插入位置后的新单元格会增加整体表格总计宽度和总计高估值。具体而言，在插入位置后的新单元格会从第一个图像块（fst图像）顶端延伸至第二个图像块（sec图像）基线位置作为其总计高估范围的一部分。另外包含文本块s1和s2，并通过vertical-align属性设置垂直对齐方式（如top或bottom）。这些文本块则依附于行高两端的位置完成布局安排。

        div {
            background: lightgreen;
            width: 400px;
            /* height: 500px; */
            margin: 80px;
        }
    
        .sec {
            margin: 20px;
            padding: 20px;
            vertical-align: -100px
        }
    
        .s1{
            vertical-align: top
        }
    
        .s2{
            vertical-align: bottom
        }
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

    <div>
        <span class="s1">xxx</span>
        <img class="fst" src="./medal.png" alt="">
        <img class="sec" src="./medal.png" alt="">
        <span class="s2">xxx</span>
    </div>
    
    
      
      
      
      
      
      
    
    AI写代码

在div内部存在一个空置的span元素，尽管内容为空，但由于设置了line-height属性而导致行高计算受到影响。

       div{
            background: lightgreen;
            width: 400px;
            margin: 50px;
        }
    
        span{
            line-height: 180px;
        }
    
    
      
      
      
      
      
      
      
      
      
    
    AI写代码

    <div>
        <span></span>XXX
    </div>
    
    
      
      
      
    
    AI写代码

基线 baseline

在语言学领域，在西文中（即语言学领域），base线（baseline）是绝大多数字母"坐"在的位置。如图所示。
其中小写字母x最具代表性。其底部位于base线上，并紧邻central线上；其高度被称为x-height。
而在CSS参数设置中：
vertical-align: middle的意义在于使相应盒子的中心与行框base线加半个x-height位置对齐。
请注意区分：这不是central线而是half-central线。

行距（Leading）与半行距

CSS指出，在 typography中, 每个 font都必须明确地规定了其 baseline以上的高度（height）与 baseline以下的深度（depth）。这里我们采用H来代表 font的高度数值, 而D则代表 font的下部深度数值. 每个 character 的 total width则等于其 baseline以上的高度与 baseline以下的深度之和 HD = H + D.

当浏览器进行渲染时，在处理非替代表格单元格中的字体时会遵循特定规则：将非替代表格单元格中的字体按基准线对齐；随后对于每个字符框体将识别其顶线高度（A）和底线高度（D）。若该单元格中无文字内容，则视作一个不可见占位符（strut），其具有基于当前字体的顶线高度（A）与底线高度（D）。

然后对每一个字形计算其应添加的leading值 L ，其中 L 等于line-height减去 HD 值。将一半间距附加到高度部分、另一半附加到深度部分。这样该文字及其间距后的总高度为 H' 等于 H 加上 L 的一半；总深度为 D' 等于 D 加上 L 的一半。（因此当我们给行内非替换元素添加line-height时，默认有让文本垂直居中的效果）**示例如下：**当line_height大于 HD 值时、每一半间距分别附加到文字的高度与深度部分。

    div {
            line-height: 200px;
            font-size: 45px;
    
            margin: 40px;
            width: 500px;
            text-align: center;
            color: rgb(209, 100, 100);
            background: rgb(132, 183, 230)
        }
    
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

注意 L可以为负

示例如下：
案例中，‘line-height’ - ‘font-size’ < 0，故行半距为负，相应视觉效果如下：

        div {
            line-height: 20px;
            font-size: 45px;
    
            margin: 40px;
            width: 500px;
            text-align: center;
            color: rgb(209, 100, 100);
            background: rgb(132, 183, 230)
        }
    
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

      <div>
        <span>'line-height' - HD < 0 </span>
    </div>
    
    
      
      
      
    
    AI写代码

• 行内盒的高度包含了所有字符以及两侧的半行间距，并精确等于该元素对应的line-height属性值。
  子级元素的具体样式参数（如margin、padding等）并不会直接影响这一高度。
  在原有示例基础上，在span元素中增加了padding样式设置。
  需要注意的是，默认情况下只有特定样式参数如margin和padding等不会直接影响父容器的高度。

       span {
    
            background: lightgreen;
            padding: 20px;
        }
    
    
      
      
      
      
      
    
    AI写代码

注

垂直居中 vertical-align

定义

align-vertical属性仅限于block-level元素，在处理这些块级元素时会考虑它们在垂直方向上的布局情况。对于非替代表格单元格而言，在计算其位置时会参考其内容区域盒子的高度（包括单元格内的字体大小以及两侧各占半个基线高度）。当处理包含替代表格单元格或使用inline-block布局的内容时，在计算它们的位置时会参考offset-box边界框（offset-box）。

常见取值

• baseline
  baseline是默认值。把盒的基线与父级盒的基线对齐。如果该盒没有基线（即无内容/流内基线的inline-block或替换元素），就把下外边距边界和父级的基线对齐
  以下示例中，最左黑色X均为块容器中的匿名行内盒文本，其底部为父级的基线。
  示例：

• middle
  把该盒的垂直中点与父级盒的基线加上父级的半x-height对齐（注意:是盒的垂直中点，不是字母的垂直中点 ）
  示例：

将该盒子与父级内容区域的顶端对齐，并且由于行内盒内容区域的高度受字体大小影响。

• text-bottom
  把该盒的底端和父级的内容区的底端对齐
  示例:

• top
  把对齐子树的顶端与行框的顶端对齐

bottom
使对齐子树的底部与行框底部对齐
示例：
top/bottom与text-top/text-bottom的区别：
text-top和text-bottom是基于由父级字体所决定的内容区域进行定位的技术指标，在使用时不会受到其他元素拉伸影响而改变位置关系。
而top和bottom则基于实际行框的位置进行定位。

• 指定比例
  取值可为正负值（line-height属性的百分比）。0%则与基准高度一致

根据给定的距离参数进行调整，并设置为相应的数值即可实现盒体的上下移动功能。当设置为px=24时，默认状态与基准位置一致。
分别向上移动24像素和向下缩放1倍即能实现不同方向的偏移效果。
显而易见的是这种方法能够灵活控制盒子的位置

inline-block的特殊情况

通常情况下, inline-block元素的底边与其最后一个child box的底边对齐.当该元素无内容或者无child box时,则其底边与外围盒(outer box)的下边缘对齐.