line-height和vertical-align

line-height

font-size

• em-square

  • 字体属性定义了自身的em-square,标识了字符绘制容器。这个正方形容器与font-size相关。但并非完全相同。
  • 字符的标线也与此相关(x-height,baseline等)

<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>
p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

文本的line-box

• 一行文本，会包含很多个以上所描述的正方形容器。所有这些容器所组成的就是line-box

  • line-box的高度依赖于其子项的高度

    • 从子项最高的点，到子项最低的点
    • 默认情况下,line-box足以包含所有的子项
    • 子项的高所指==并非==content-area的高度

  • 行内元素拥有两个不同的高度

    • content-area的高度

      • 由font-size与font-family共同作用

    • virtual-area的高度

      • 即line-height
    • 

  • line-height并非两行文本baseline的距离,而是virtual-area的高度(word,PS等软件中,使用的是两行文本baseline的距离)

    • 

  • virtual-area和content-area的高度差为leading（半行距）

    • 一半的leading在content-area之上,另一半在下
    • leading不支持非整数,向上的一半为向上取整,向下的部分为向下取整（可能不准确）。所以多数情况，content-area会在virtual-area居中偏下的位置(leading若刚好为2的倍数,则content-area会垂直居中)。

• <p>标签由数个line-box构成

  • 以下的<p>由三个line-box组成

    • 第二行最高
    • 没有由标签控制的第一行和第二行,无法通过非继承css属性进行控制(包括::first-line)

<p>
    Good design will be better.
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
    We get to make a consequence.
</p>

其他类型的line-box

• 类型

  1. 替换元素，比如img, input, svg等
  2. inline-block以及inline-*
  3. 特殊格式的inline元素。比如在flexbox中,所有的flex子项。

• 这些元素的高度,由height,margin和border进行计算。

  • height:auto

    • height,line-height,content-area的高度都完全相等。
    • 

  • 手动设置line-height,此时仅相当于设置了最小高度

    • 主要由于vertical-align的影响

line-height的常规值

• 文本

  • line-height既virtual-area完全由font-family确定,由字体设计者来定义。

  • 因此将设置line-height:1是很坏的习惯。很可能导致virtual-area的区域比content-area要小.

    • line-height设置为一个无单位数,即标识其为font-size的对应倍数。
  • padding以及border会增加background的区域,但不会修改content-area的区域

• 其他

  • padding`margin以及border会修改height, content-area 和line-box`。

vertical-align

相对父元素的匿名内联元素对齐

• baseline

  • vertical-align的默认值

  • 文本

    • baseline的具体位置由各字体确定

  • 其他

    • img及inline-block等

      • 图片的底边为对齐值

    • textarea等

      • 未详细规定,由各浏览器自己实现
  • 使用元素的baseline去对齐父级块内的匿名内联元素的baseline
  • CSS2的可视化格式模型文档中有一么一段话：

>The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

* 一个`inline-block`元素，如果里面没有`inline`内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线

```
.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>
```

明明尺寸、display水平都是一样的，结果呢，两个却不在一个水平线上对齐，为什么呢？哈哈，上面的规范已经说明了一切。第一个框框里面没有内联元素，因此，基线就是容器的margin下边缘，也就是下边框下面的位置；而第二个框框里面有字符，纯正的内联元素，因此，第二个框框就是这些字符的基线，也就是字母x的下边缘了。于是，我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。

• middle

  • 文本

    • This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.

    • 中点由==元素==的baseline加上其1/2x-height的高度，具体可参考字母’x’在CSS世界中的角色和故事。

      • 这里的元素包括父级块内的匿名内联元素

  • 其他

    • 内容区域的中心

  • 将这些元素的中点进行对齐。

    • 也就是说...middle也不会是真居中,和字体的x-height和baseline相关。
    • 纯粹由可替换元素组成的内容需要居中时,可以设置父级font-size:0,将父级块内的匿名内联元素高度置为0(即保证了该元素的所有线都是一致的)

• top/bottom

  • 文本

    • line-box的顶部/底部

  • 其他

    • 外边距的顶部/底部

• text-top/text-bottom

  • 文本

    • content-area的顶部/底部

  • 其他

    • 外边距的顶部/底部
• 实质上,以上的属性都是由子元素的对齐点，去匹配父元素内的匿名内联元素的对应对齐点。

数值

• 百分比

  • 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。负值则为向下

• 数值

  • 使元素的基线对齐到父元素的基线之上的给定长度。负值则为向下

问题

• vertical-align:baseline可能导致line-box高度比line-height要大。

<p>
    <span>Ba</span>
    <span>Ba</span>
</p>
p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}
span:last-child {
    font-size: 50px;
}

• 更为常见的情况是

<p>
    <span>Ba</span>
</p>
p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}

此时line-box中会存在一个匿名行内元素,字符属性与<p>可继承的字符熟悉值相同。该元素width为0,line-height与<span>很可能不一致。导致<p>的高度不为200px;

//这样可能更容易理解,Ba就是那个 匿名行内元素,即使没有在标签中显式添加文本内容，也会存在对应高度
<p>
    Ba
    <span>Ba</span>
</p>
p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}

参考地址:

1. https://www.zhangxinxu.com/wo...
2. https://stackoverflow.com/que...
3. https://stackoverflow.com/que...
4. https://stackoverflow.com/que...
5. https://iamvdo.me/en/blog/css...