lineheight和verticalalign

jiezi

5 年前

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足以包含所有的子项
  - 子项的高 所指 == 并非 ==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 会垂直居中)。
标签由数个 line-box 构成
- 以下的  由三个 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>

类型
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`。

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

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

https://www.zhangxinxu.com/wo…
https://stackoverflow.com/que…
https://stackoverflow.com/que…
https://stackoverflow.com/que…
https://iamvdo.me/en/blog/css…

lineheight和verticalalign

line-height

font-size

文本的 line-box

其他类型的 line-box

`line-height`的常规值

vertical-align

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

数值

问题

参考地址:

line-height

font-size

文本的 line-box

其他类型的 line-box

line-height的常规值

vertical-align

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

数值

问题

参考地址:

`line-height`的常规值