行內元素(inline標籤)設定了行高為什麼不生效，還是表現為父盒子的行高？行內元素行高問題終極解釋
最近在看張鑫旭大佬的《css世界》，讀到5.2.4 內聯元素 line-height 的“大值特性” ，產生了疑惑，
在開發中確實也遇到了同樣的問題，深入探究後得出結果，先說結論吧，論證內容有點長，結論：
行內元素自身並沒有行高這個屬性，雖然設定可以設定行高，但是最終作用的地方並不是自身，而是其自身所在的行框盒子上！如果你不知道什麼是行框盒子，建議你好好讀讀張大佬的《css世界》，這裡我簡單的畫一畫
如上如所示，我的結論是：
內聯盒子沒有行高這一屬性，給它設定line-height，最終是作用在行框盒子上，而行框盒子最終會取內部行高最高的那個作為最終行高，而此行高將在其內部所有內聯盒子中生效！
上程式碼：
<style>
p{
line-height: 96px;
}
span{
line-height: 20px;
}
</style>
<!--------分割線---------->
<p>
<span>span標籤中的文字</span>
</p>
為了讓文字換行體現效果，我把瀏覽器縮窄一些，span標籤中的文字放多一點，上述程式碼頁面表現為：
如上圖，span的line-height屬性確實設定上了，並且覆蓋了繼承的來自父元素p的line-height:96px;但是從換行來看，span的表現，依然是line-height:96px; !!
張大佬的書中只解釋了父盒子的高度問題，簡單回顧下：因為幽靈空白節點繼承了父元素p的行高，所以撐起了p元素的高，所以整個的高度為96px。按照張大佬的解釋理解，
span的行高應該是24px，幽靈空白節點的行高為96px，行高撐起了高度，所以父元素的高度為最高的高度。
但是，這裡通過換行我們可以發現span表現的並不是20px,而是96px ！而且通過偵錯程式我們發現，上下調整span的line-height頁面根本一點變化都沒有，紋絲不動！
這時候小白就要說話了，行內元素的行高設定無效！聰明的你試一下就會發現，行內元素當然是可以設定行高屬性的。那這裡為什麼會設定無效呢？其實當你設定span的行高超過父元素的時候，你就會發現，有意思的現象出現了！
沒錯，span的行高生效了！
那麼問題來了，說不生效吧，比父元素行高大的時候它生效了，說生效吧，小於父元素行高的時候多少都沒用，什麼情況?問題不急著回答，再看下面一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
line-height: 20px;
}
span{
line-height: 40px;
}
em{
line-height: 80px;
}
b{
line-height: 160px;
}
</style>
</head>
<body>
<p>
<span>span標籤中的文字</span><em>em中的文字</em><b>b中的文字</b>
</p>
</body>
</html>
高度不用說，按照張大佬得出的大值特性，肯定是160px。那行高呢？各位不妨猜猜最終的表現，
我猜你肯定猜到了，沒錯，就是這樣：
結合上述盒子模型圖，在這個例子中應該是這樣的
幽靈空白節點繼承父元素的行高屬性 ，各個內聯盒子自身有自身的行高屬性，但是這些“行高屬性”都不是作用在自身而是作用在如圖的行框盒子上，
而行框盒子又反過來讓其內的所有內聯盒子表現出行高的特性。打個通俗點的比方講就是，爸爸問自己的兒子們今晚吃啥，兒子們提意見，爸爸其中一個的意見後發出命令，今晚大家都吃這個！
兒子們自己決定不了，但可以提意見，切回行高就是，內聯盒子決定不了自己所在行的行高，但是可以告訴行框盒子，我想是這麼多！(line-height:***)
最後帶來一個小例子，提醒一下各位看官，行框盒子的行高也不是固定，什麼意思呢？還是上例的樣式（為了方便觀看，我為對應元素加上底色，
同時去掉margin和padding的影響），請看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
line-height: 20px;
}
span{
line-height: 40px;
background-color: red;
}
em{
line-height: 80px;
background-color: green;
}
b{
line-height: 160px;
background-color: blue;
}
</style>
</head>
<body>
<p>
<span>span標籤中的文字很長很長很長很長很長很長很長很長很長很長很長很長</span>
<em>em中的文字很長很長很長很長很長很長很長很長很長很長很長很長</em>
<b>b中的文字很長很長很長很長很長很長很長很長很長很長很長很長</b>
</p>
</body>
</html>
調整瀏覽器的寬度，使換行，效果如下：
就不賣關子，直接說了，這裡變成了這樣：
一個包含盒子（包含塊）p，4個行框盒子，4個行框盒子。
第一個行框盒子裡包含了幽靈空白節點+span標籤的前部分，
第二個行框盒子包含了幽靈空白節點、span標籤的後部分和em標籤的前部分，
第三個行框盒子包含了幽靈空白節點、em的後部分和b標籤的前部分，
第四個行框盒子包含了幽靈空白節點、b標籤的後部分。
四行表現的行高分別是 40px 、80px、160px、160px。
最後的最後來個總結：
1. 行內元素的line-height屬性是去設定該元素所在行框盒子的行高，行框盒子取其內部所有內聯盒子要求的行高的最大值，定為當前行的行高，所有內聯盒子遵守這個最終行高來行事！
2.換行後生成新的行框盒子，新生成的行的行高，重新在當前行包含的內聯盒子中選拔最高者定之！