lineheight和verticalalign

69次阅读

共计 3873 个字符，预计需要花费 10 分钟才能阅读完成。

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…

正文完
css
发表至：无分类
2019-11-15
 0