line-height 和 vertical-align 都是簡(jiǎn)單的 CSS 屬性冻辩，以致于大多數(shù)人自以為知道這兩個(gè)屬性的工作原理越败，但實(shí)際上這兩個(gè)屬性沒(méi)那么簡(jiǎn)單触幼，下面可能能讓你加深理解這2個(gè)屬性
有關(guān)于基線：
基線的位置是怎么確定的呢？—— 字母x的下邊緣線
vertical-align屬性中究飞，其默認(rèn)值為baseline( 基線 )：使元素的基線與父元素的基線對(duì)齊置谦。HTML規(guī)范沒(méi)有詳細(xì)說(shuō)明部分可替換元素的基線，這意味著這些元素使用此值的表現(xiàn)因?yàn)g覽器而異亿傅。
注意 vertical-align 只對(duì)行內(nèi)元素媒峡、表格單元格元素生效：不能用它垂直對(duì)齊塊級(jí)元素
問(wèn)題1：下面代碼中，第二個(gè) span 的 font-size 變成 50px葵擎。此時(shí)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>
問(wèn)題二：下面代碼中，此時(shí)p的高度是多少签餐？（是200px嗎寓涨？）
<p style='background:green;line-height: 200px;'>
<span style='background:red;font-size: 100px;'>Ba</span>
</p>
答案1：此時(shí)的p的高度變高了。
看下面的圖氯檐，已經(jīng)可以大概明白是為什么了戒良。字體變小的時(shí)候，實(shí)際內(nèi)容的中間線（行高是以實(shí)際內(nèi)容的中間線等分的）與基線更靠近了冠摄。所以導(dǎo)致了下面的結(jié)果糯崎，高度被撐高了。
答案2：此時(shí)的p的高度大于200px耗拓。
因?yàn)闉g覽器認(rèn)為每個(gè)“行框盒子”前面拇颅，存在一個(gè)同時(shí)具有該元素的字體和行高屬性且寬度為 0 的內(nèi)聯(lián)盒（CSS 中稱為 strut）。知道了這個(gè)乔询，剩下的就和第一個(gè)問(wèn)題的內(nèi)容一樣了樟插。（這里有一個(gè)前提，文檔聲明必須是HTML5文檔聲明竿刁，如果還是很多年前的老聲明黄锤，則不存在strut）
下面的圖，我在p元素里加了X食拜，應(yīng)該可以更容易明白這個(gè)問(wèn)題鸵熟。
想當(dāng)初，遇到上面相似的奇怪現(xiàn)象负甸，糾結(jié)半天一直沒(méi)懂×髑浚現(xiàn)在了解到基線，然后明白 line-height 和 vertical-align的相互影響呻待，之前令人費(fèi)解的現(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
