line-height 和 vertical-align 都是簡單的 CSS 屬性，以致于大多數(shù)人自以為知道這兩個屬性的工作原理，但實際上這兩個屬性沒那么簡單，下面可能能讓你加深理解這2個屬性
有關(guān)于基線：
基線的位置是怎么確定的呢？—— 字母x的下邊緣線
vertical-align屬性中，其默認(rèn)值為baseline( 基線 )：使元素的基線與父元素的基線對齊。HTML規(guī)范沒有詳細(xì)說明部分可替換元素的基線，這意味著這些元素使用此值的表現(xiàn)因瀏覽器而異。
注意 vertical-align 只對行內(nèi)元素、表格單元格元素生效：不能用它垂直對齊塊級元素
問題1：下面代碼中，第二個 span 的 font-size 變成 50px。此時p的高度是多少？（還是200px嗎？）
<p style='background:green;font-size: 100px;line-height: 200px;'>
<span style='background:red'>Ba</span>
<span style='background:yellow'>Ba</span>
</p>
問題二：下面代碼中，此時p的高度是多少？（是200px嗎？）
<p style='background:green;line-height: 200px;'>
<span style='background:red;font-size: 100px;'>Ba</span>
</p>
答案1：此時的p的高度變高了。
看下面的圖，已經(jīng)可以大概明白是為什么了。字體變小的時候，實際內(nèi)容的中間線（行高是以實際內(nèi)容的中間線等分的）與基線更靠近了。所以導(dǎo)致了下面的結(jié)果，高度被撐高了。
答案2：此時的p的高度大于200px。
因為瀏覽器認(rèn)為每個“行框盒子”前面，存在一個同時具有該元素的字體和行高屬性且寬度為 0 的內(nèi)聯(lián)盒（CSS 中稱為 strut）。知道了這個，剩下的就和第一個問題的內(nèi)容一樣了。（這里有一個前提，文檔聲明必須是HTML5文檔聲明，如果還是很多年前的老聲明，則不存在strut）
下面的圖，我在p元素里加了X，應(yīng)該可以更容易明白這個問題。
想當(dāng)初，遇到上面相似的奇怪現(xiàn)象，糾結(jié)半天一直沒懂?，F(xiàn)在了解到基線，然后明白 line-height 和 vertical-align的相互影響，之前令人費解的現(xiàn)象總算明白了。
參考鏈接：https://zhuanlan.zhihu.com/p/25808995
https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/
https://www.cnblogs.com/beginner2014/p/9366682.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
