深入理解 line-height 和 vertical-align

發(fā)布時(shí)間：2018-12-27 16:11:20 作者：afishhhhh

這篇文章主要介紹了深入理解 line-height 和 vertical-align的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

幾個(gè)概念

line box：包裹 inline box 的一個(gè)盒子，一個(gè)或多個(gè) line box 堆疊撐起一個(gè) HTML 元素。
inline(-level) box：可以是一個(gè)由行內(nèi)元素包裹的盒子，也可以是一個(gè)純文字的匿名盒子。
content area：對(duì)于非替換元素來(lái)說(shuō)，content area 的范圍由 font-size 以及字體本身決定；對(duì)于替換元素來(lái)說(shuō)，由元素自有寬高決定。
baseline：一個(gè)元素基線的位置由該元素內(nèi)字母 x 底部所在的位置決定，當(dāng)然字體不同基線所在的位置也就不同。

通過(guò)一段代碼可以理解一下：

div {
  background-color: #ccc;
  font-size: 20px;
  color: #fff;
}
span {
  color: red;
}
<div>文字1<span>文字2</span>文字3</div>

白色的文字就是一個(gè)匿名 inline box，紅色的文字是一個(gè)由 span 包裹的 inline box。這三個(gè) inline box 組成一個(gè) line box，可以理解為灰色的區(qū)域，因?yàn)樵谶@個(gè)例子里就是由一個(gè) line box 撐開(kāi)了 div。如果有多行的文字，那就有多個(gè) line box。

關(guān)于 content area，W3C 有一段這樣的解釋：

CSS 2.1 does not define what the content area of an inline box is (see 10.6.1 above) and thus different UAs may draw the backgrounds and borders in different places.

這篇文章對(duì)非替換元素 content area 的定義就是自有寬高加上 margin，padding 以及 border。我認(rèn)為應(yīng)該將 content area 理解為 content box。

line box 高度

瀏覽器會(huì)計(jì)算 line box 中每一個(gè) inline box 的高度，對(duì)于不同的 inline box 計(jì)算方式有所不同：

如果是一個(gè)替換元素（比如 img，input），inline-* 元素或者是 flexbox 中的子元素，高度由其 margin box 決定；

inline-block 元素：

div {
  background-color: #ccc;
  color: #fff;
}
span {
  display: inline-block;
  height: 30px;
  margin: 10px;
  background: #fff;
  color: red;
}
<div>xxx<span>xxx</span>xxx</div>

這里 span inline box 的高度就是 height + margin 2。如果 height 的值是 auto，高度就是等于 line-height + margin 2。

如果是一個(gè)非替換元素，高度由它的 line-height 決定，而不是 content area，雖然有時(shí)候看起來(lái)像 content area 撐開(kāi)了 line box 的高度。

div {
  background-color: #ccc;
  font-size: 20px;
  color: #fff;
  font-family: Sana;
}
span {
  background: #fff;
  color: red;
}
<div>xxx<span>xxx</span>xxx</div>

這張圖片可以明顯地看出撐開(kāi) line box 的是 line-height，而不是 content area。

這篇文章用了 virtual-area height 來(lái)表示 line-height 撐開(kāi)的高度，而我的理解其實(shí)就是 inline box 的高度。

line box 中所有 inline box 的最高點(diǎn)以及最低點(diǎn)決定了它的高度（該計(jì)算包括了 strut 的高度，后文會(huì)提到 strut）。

非替換元素的的 margin，padding 以及 border 并不會(huì)影響 line box 高度的計(jì)算。當(dāng)一個(gè) inline-level box 的 line-height 小于 content area 的時(shí)候，line box 的高度就會(huì)小于 content area，此時(shí)元素的 background 以及 padding 等就會(huì)溢出到 line box 之外。

以下代碼可以說(shuō)明這個(gè)問(wèn)題：

div {
    background: #eee;
    border: 1px solid #000;
    box-sizing: border-box;
    font-size: 50px;
    line-height: 10px;
}
span {
    background: red;
    margin: 10px;
    padding: 10px;
}
<div><span>xxx</span></div>

leading:

content area 的高度與 inline box 的高度差就是 leading，這個(gè) leading 會(huì)等分被添加到 content area 的頂部與底部，所以說(shuō) content area 永遠(yuǎn)位于 inline box 的中間（垂直居中）。

strut:

瀏覽器認(rèn)為每一個(gè) line box 的起始位置都存在一個(gè)寬度為 0，沒(méi)有任何字符的匿名 inline box，稱為 strut，這個(gè) strut 是會(huì)從父元素繼承 line-height 的，因此它的高度會(huì)影響整個(gè) line box 高度的計(jì)算。

一個(gè)例子

div { background: #eee; border: 1px solid #000; box-sizing: border-box; }
<div><img src="./image.png" alt=""></div>

在圖片中可以看到 img 與外層的 div 存在一個(gè)間隙，這就是上文提到的 strut 造成的。

在這個(gè)例子中，默認(rèn)情況下 img 的底邊與父元素的基線對(duì)齊（img { vertical-align: baseline }），而這個(gè)基線實(shí)際上就是 strut 基線所在的位置。如下圖所示：

strut 其實(shí)就相當(dāng)于一個(gè)不可見(jiàn)的字母 x，上文已經(jīng)提到 strut 本身是具有 line-height 的，所以就導(dǎo)致圖片底部多了一段間隙。

總結(jié)一下存在間隙原因：

strut 存在 line-height
vertical-align 默認(rèn)值為 baseline

對(duì)應(yīng)的解決方案：

修改 strut 的 line-height，因?yàn)?strut 的 line-height 不是能夠直接設(shè)置的，所以需要設(shè)置父元素的 line-height，然后讓 strut 繼承，或者修改 font-size
將 vertical-align 設(shè)置為其他值line-height

W3C 中對(duì)于 line-height 的解釋是這樣的：

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. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

我的簡(jiǎn)單理解是，對(duì)于由行內(nèi)元素組成的塊級(jí)元素而言，line-height 決定了 line box 的最小高度，瀏覽器會(huì)假定每一個(gè) line box 以一個(gè)寬度為 0 的 inline box （strut）開(kāi)始，而這個(gè) strut 從父元素繼承到 font 以及 line-height。

normal 是 line-height 的默認(rèn)值，W3C 對(duì)它并沒(méi)有一個(gè)明確的定義。normal 會(huì)將 content area 作為一個(gè)計(jì)算因素。
line-height 并不是兩條 baseline 之間的距離。
line-height 的值推薦使用數(shù)值，而不是使用 em 單位，因?yàn)?em 單位會(huì)根據(jù)從父元素繼承到的 font-size 來(lái)計(jì)算行高。

vertical-align

W3C 對(duì) baseline 以及 middle 的定義如下：

baseline: Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

元素基線與父元素基線對(duì)齊，如果元素沒(méi)有基線，比如 img，則使用 margin 底邊與父元素基線對(duì)齊。