以下是自己對(duì)CSS 文本框，行內(nèi)框，行框，vertical-align的理解終結(jié)

line-height屬性，也就是行高,指定了塊級(jí)元素內(nèi)的/內(nèi)聯(lián)元素內(nèi)單行文本渲染時(shí)的行內(nèi)框(inline-box,內(nèi)聯(lián)盒)的高度，一個(gè)塊內(nèi)可以有多個(gè)內(nèi)聯(lián)文本元素或匿名元素，它們可以有各自的line-height屬性，一行中的多個(gè)行內(nèi)框共同決定了行框(line-box)的高度-最高行內(nèi)框的頂部和最低行內(nèi)框的底部之間的距離就是行框(line-box)的高度，也就是我們看到的一行元素占據(jù)的高度。而這個(gè)行框(line-box)決定了多行文本之間在垂直方向的排列方式-下一行的行框(line-box)的頂部和上一行的行框(line-box)的底部貼緊。
文本按設(shè)置的font-size以及font-family屬性構(gòu)成一個(gè)文本框(text-box),默認(rèn)情況下這個(gè)文本框(text-box)的高度和設(shè)置的font-size相同,但是在不同的瀏覽器下可能會(huì)有所不同:firefox下和設(shè)定的font-size相同，而chrome下會(huì)是font-size的1.4倍左右。行內(nèi)框(inline-box,內(nèi)聯(lián)盒)和文本框(text-box)之間的高度差的1/2會(huì)被添加到文本框(text-box)的頭部和底部,添加的部分就叫做半行間距。
也就是說(shuō) 行內(nèi)框(inline-box,內(nèi)聯(lián)盒) 是由文本框(text-box)和半行間距共同構(gòu)成的。

通過(guò)圖示能更清楚些看到:

那么行內(nèi)框(inline-box,內(nèi)聯(lián)盒)的上下位置又是通過(guò)什么決定的呢？
它就是vertical-align屬性-沒(méi)有繼承性，只對(duì)內(nèi)聯(lián)元素以及table-cell元素有效
vertical-align有不同的屬性,按參考線的不同可以分成3類:
1 相對(duì)baseline的
baseline就是圖示中的藍(lán)色線條表示的，對(duì)于baseline的具體位置根據(jù)font-size以及font-family的不同而不同,基本上對(duì)應(yīng)字體及大小下，小寫字母x的底部就是baseline線的位置;對(duì)應(yīng)的屬性值有baseline(默認(rèn)),sub(baseline往下),super(baseline向上),百分比(baseline+行高的百分比)，具體長(zhǎng)度值(baseline+指定長(zhǎng)度),middle(baseline向上1/2個(gè)x-height)。其中提到的x-height就是小寫字母x的高度,在CSS中有一個(gè)ex的長(zhǎng)度單位指的就是x-height，其具體值大約等于0.5em。

2 相對(duì)文本框(text-box)上下邊的
圖示中的綠色上下邊,對(duì)應(yīng)的屬性值有text-top,text-bottom

3 相對(duì)行內(nèi)框(inline-box,內(nèi)聯(lián)盒)上下邊的
圖示中的紅色上下邊,對(duì)應(yīng)的屬性值有top,bottom

同時(shí)要記住重要的一點(diǎn)在一個(gè)內(nèi)聯(lián)元素的所在的父元素(塊級(jí)元素)的開(kāi)頭會(huì)添加一個(gè)寬度為0的匿名字符x,這個(gè)看不到的x字符做為以baseline為基準(zhǔn)的對(duì)齊方式的基準(zhǔn)

下面給出一些例子來(lái)看看對(duì)齊的效果以及對(duì)最終行框(line-box)高度的影響

例子1:

vertical-align:text-top; 
line-height: 72px; 
font-size: 36px;

.div-line{
    line-height: 72px;
    font-size: 36px;
}
.span-line-0{
    background-color: #F74A81;
    font-size: 36px;
    vertical-align: text-top;
}

    <div class="div-line" style="margin-top: 10px;">x
        <span class="span-line-0">00X00</span>
        <span class="span-line-0">abcdefhijklmn</span>
        <span class="span-line-0">opqrstuvwxyz</span>
    </div>

最終div的高度是90px:灰色區(qū)為行內(nèi)框(inline-box,內(nèi)聯(lián)盒),div構(gòu)成一個(gè)行框(line-box),紅色虛線以及紅色背景的文字構(gòu)成文本框(text-box),.span-line-0的vertical-align對(duì)齊方式為text-top，那么就和紅色虛線的文本框的頂部對(duì)齊，紅色虛線的行內(nèi)框的半行間距為(72-36)/2=18px,那么按行框構(gòu)成的規(guī)則，整個(gè)行框的高度值為72+18=90px;

例子2:

vertical-align:base-line; 
line-height: 72px; 
font-size: 36px;

        .div-line{
            line-height: 72px;
            font-size: 36px;
        }
        .span-line-0{
            background-color: #F74A81;
            font-size: 36px;
        }

        .span-line-1{
            background-color: #F74A81;
            font-size: 20px;
        }
        .span-line-2{
            background-color: greenyellow;
            font-size: 40px;
        }
        
    <div class="div-line">
        <span class="span-line-0">00X00</span>
        <span class="span-line-1">abcdefhijklmnopqrstuvwxyz</span>
        <span class="span-line-2">abcdefhijklmnopqrstuvwxyz</span>
    </div>

共有3塊行內(nèi)框(inline-box,內(nèi)聯(lián)盒)，對(duì)齊方式為默認(rèn)的baseline,要確定baseline的集體位置才能計(jì)算出各個(gè)內(nèi)聯(lián)盒的相對(duì)位置，下面提供一個(gè)算法,僅供參考:

middle=baseline+0.5*x-height;
x-height=0.5em=0.5*front-size;
=>
middle=baseline+0.25*front-size;
=>
baseline=middle-0.25*front-size;

先middle對(duì)齊

匿名字符x行內(nèi)框的baseline位置為middle點(diǎn)往下9px;
第1個(gè)行內(nèi)框的(00X00)baseline位置為middle點(diǎn)往下9px;
第2個(gè)行內(nèi)框的(abcdefhijklmnopqrstuvwxyz)位置為middle點(diǎn)往下5px;
第3個(gè)行內(nèi)框的(abcdefhijklmnopqrstuvwxyz)位置為middle點(diǎn)往下10px;

接著以匿名字符x的baseline線對(duì)齊,
第1個(gè)行內(nèi)框的不動(dòng)
第2個(gè)行內(nèi)框的向下調(diào)整移動(dòng)4px
第3個(gè)行內(nèi)框的向上調(diào)整移動(dòng)1px

第2個(gè)行內(nèi)框最低
第3個(gè)行內(nèi)框最高

最終相比設(shè)定line-height，高出5px，最終的行框高度為72+5=77px;
如果將第1個(gè)行內(nèi)框的(00X00)的font-size位置為18px,按上面的算法最終的行框高度為72+5.5=77.5px;

啰里啰嗦說(shuō)了那么多，希望對(duì)你有幫助......

以上內(nèi)容參考了Vertical-Align: All You Need To Know

你問(wèn)題太多我也不知道你到底想問(wèn)什么
首先標(biāo)題行盒的高度計(jì)算w3c規(guī)范中有描述，簡(jiǎn)單概括就是需要包裹住所有的子盒子具體見(jiàn) 10.8，而內(nèi)聯(lián)盒的高度計(jì)算方式規(guī)范也有在10.6.1 。
第一張圖沒(méi)太看明白你什么意思
中間的問(wèn)題，在zxx的這篇文章這不是死結(jié)論，而是幫你理解line box高度的，在某些情況下這個(gè)結(jié)論是不對(duì)的
第二張圖你這樣理解，中線間距往下移一個(gè)字體中線到基線的距離不就正好等于基線間的距離嗎，不過(guò)實(shí)際上這個(gè)圖在css中也基本沒(méi)什么用，css中你需要知道的是'line-height'這個(gè)值會(huì)對(duì)布局產(chǎn)生哪些影響