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...