摘要：的邊界是該行內(nèi)的最高點和最低點，即的頂部邊緣是該行內(nèi)最高的頂部邊緣，底部邊緣是該行內(nèi)最底的底部邊緣。是垂直對齊發(fā)生的區(qū)域。將文本去掉，會發(fā)現(xiàn)父元素高度不變。元素的基線通過絕對長度相對于的基線進行偏移。

vertical-align適用于inline-level元素，即inline,inline-block或inline-table 。

inline元素的外邊緣是由它的line-height決定的。

紅線：元素外邊緣，即行高的頂部和底部邊緣。

綠線：字體的高度。

藍線：基線。

上圖中，左側(cè)的那個，文本的行高設(shè)置為與字體大小相同的高度。上下兩邊綠色和紅色的線均重合為一條線。中間的那個，行高是字體高的兩倍。右邊的那個，行高是字體高的一半。

inline-block元素的外邊緣就是它的margin-box的頂部和底部邊緣。

紅線：元素外邊緣，即margin-box的頂部和底部邊緣。

藍線：基線。

上圖中從左到右可以看到：一個inline-block元素里面有in-flow內(nèi)容（一個“C”）,一個inline-block元素有in-flow內(nèi)容和overflow: hidden，一個inline-block元素沒有in-flow內(nèi)容（但是內(nèi)容區(qū)域有高度）。

Inline-block元素的基線取決于元素是否具有in-flow內(nèi)容：

有in-flow內(nèi)容，inline-block元素的基線是普通流中最后一個內(nèi)容元素的基線（例如左邊那個）。對于最后一個元素，它的基線是根據(jù)它自己的規(guī)則確定位置的。

有in-flow內(nèi)容并且使用了值不是visible的overflow，基線就在margin-box的底部邊緣那個位置（例如中間那個）。因此，它與inline-block元素的底部邊緣一樣。

沒有in-flow內(nèi)容，基線也是在margin-box的底部邊緣那個位置（例如右邊那個）。

例如：下圖中紫色為基線，兩個span均是基線對齊。兩幅圖對比可以看出，隨著第一個span元素中內(nèi)容的增多，基線下移了。

 

    士大夫和健康
    
  

 

    士大夫和健康士大夫和健康
    
  
 

【注】：如果一個元素是浮動的(float:left/right)，絕對定位的(position:absolute/fixed)或者是根元素(html)，那么它被稱之為流外的元素(out-of-flow)。如果一個元素不是流外的元素，那么它被稱之為流內(nèi)的元素(in-flow)。

content-area：在非替換元素中，指元素中每個字符的字體大小串在一起所組成的框；在替換元素中，元素的固有高度加上任何margins, borders或padding。

inline box：每個元素的content-area加上leading。對于非替換元素，元素的inline box的高度等于line-height的值；對于替換元素，元素的inline box的高度等于該元素的固有高度加上任何margins, borders或 padding。

line box：一行就是一個line box。line box的邊界是該行內(nèi)inline boxes的最高點和最低點，即line box的頂部邊緣是該行內(nèi)最高inline box的頂部邊緣，底部邊緣是該行內(nèi)最底inline box的底部邊緣。

文本盒可以當(dāng)做是放在line box里面的沒有任何對齊的行內(nèi)元素。文本盒的高度等于它的父元素的字體大小。因此，文本盒只是把line box的無格式文本圍起來了。這個盒子就是下圖中用綠線標出來的那個。因為這個文本盒與基線相關(guān)聯(lián)，當(dāng)基線移動時，它也移動。

line box的基線無法定義。line box的基線被放在能夠?qū)崿F(xiàn)所有條件的地方。

綠色：line box的文本盒。
紅色：line box的頂部和底部邊緣。
藍色：基線。
灰色：文本元素的區(qū)域。

查看line box基線的方法：在行的開頭增加一個字符，就像上圖中增加的“X”。它默認地坐在基線上。line box是垂直對齊發(fā)生的區(qū)域。line box有一條基線，一個文本盒和一個頂部和底部邊緣。

當(dāng)一行中僅有行內(nèi)不可替換元素，且這些元素都是相同的 font-size、line-height和vertical-align。則content-area=font-size， line-box的高=line-height。

當(dāng)一行中包含行內(nèi)元素，這些元素包括可替換和不可替換，這些元素有不同的 font-size和 line-height。則按以下方式計算：content-area的高由每個不可替換元素的font-size，以及替換元素的固有高度和任何padding, borders,或margins決定。leading應(yīng)用于每一個元素，一半放在頂部，一半放在底部。line box的頂部邊緣是該行內(nèi)最高inline box的頂部邊緣，底部邊緣是該行內(nèi)最底inline box的底部邊緣。

例如：

      anchor angry text
      bold

anchor的content-area是128pt,但是他的inline box是12pt。假設(shè)字體是Helvetica，那么

descent : 128pt*219/1000=28pt
ascent :  128pt*781/1000=100pt
halfleading : (12pt-128pt)/2 = -58pt
inline box的top：100pt-58pt=42pt
inline box的bottom：58pt-28pt=30pt

所以這個inline box的top為基線上42pt,bottom為基線上30pt。同理可得匿名文本angry text的top是基線上10pt,基線下2pt。所以line-box的高是44pt：基線上42pt，基線下2pt。

將angry text文本去掉，會發(fā)現(xiàn)父元素P高度不變。
原因：根據(jù)W3C規(guī)范：
在由inline-level元素組成的塊容器元素中，line-height確定了該元素內(nèi)部line boxes的最小高度。這個最小高度由基線上的最小高度和基線下的最小深度組成，就像每個line box都是由寬度為零，擁有父元素的font-size和line-height的inline box（假想元素）開始的。
我的理解是line box是在這個假想元素的基礎(chǔ)上往兩邊延伸。例如：

    

      anchor
    

p元素中只有anchor文本，但是該文本的inline box的top為基線上42pt,bottom為基線上30pt。所以line box的top為基線上42pt，而line box的bottom不是基線上的30pt，而是原先假想元素的基線下的最小深度（即上圖中藍線到最后一條紅線的距離）。

因此，即使沒有angry text文本，基線下也會有一個最小深度，所以導(dǎo)致P元素的高度不變。

注：

例子中計算Helvetica字體用的219和781是修改過的數(shù)據(jù)，只是為了讓數(shù)據(jù)好看點，實際應(yīng)該是接近于225和775。

leading = line-height - font-size。
其中一半leading加到文字上方，另一半leading加到文字下方。

line-height對可替換元素的inline box沒有影響，但是當(dāng)該元素的vertical-align值為百分比時，是有影響的。

baseline：元素的基線在line box的基線頂部。

sub：元素的基線移動到line box基線以下。

：元素的基線通過與line-height相關(guān)聯(lián)的percentage ，相對于line box的基線進行偏移。

:元素的基線通過絕對長度相對于line box的基線進行偏移。

middle:元素頂部和底部兩者間的中點與line box的基線加上二分之一的x-height對齊。

text-top:元素的頂部邊緣與line box的文本盒的頂部邊緣對齊。

text-bottom:元素的底部邊緣與line box的文本盒的底部邊緣對齊。

top: 元素的頂部邊緣與line box的頂部邊緣對齊。

bottom:元素的底部邊緣與line box的底部邊緣對齊。

例如：

div {
    font-size: 16px;
    line-height: 1;
    background-color: #eee;
    margin-top: 10px;
  }
  
  .tall-box {
    border: 1px solid red;
    width: 40px;
    height: 40px;
    display: inline-block;
  }
  
  .short-box {
    border: 1px solid black;
    width: 40px;
    height: 10px;
    display: inline-block;
  }
  

        
    Exg
    
  

若將tall-box的vertical-align變成top,得下圖

從上下兩幅圖對比可以看出，隨著vertical-align從text-top變成top，Exg往上移，導(dǎo)致字體高超出了父div的邊界。這是由于line-height的高小于字體高。

若將第一個圖中的父div的line-height變?yōu)?，使Exg的line-height值大于字體原本的高度，則得下圖。從圖中可以看到，紅框下降了，父div的高度變高了。這是由于紅框是text-top對齊，由此可知道基線位置在哪里。而基線位置的確定可以確定Exg和黑框的位置。而line box的頂部邊緣是該行內(nèi)最高元素的頂部邊緣，這時候最高的是Exg,因此可以看到紅框下降，父元素變高了。

可以看到li元素底下有間隙。

間隙產(chǎn)生的原因：因為列表項位于基線上，而在基線下是放文本descenders空間。

取消該間隙的方法：

設(shè)置li元素vertical-align: middle;

在li元素內(nèi)添加內(nèi)容。因為內(nèi)容會將基線上移。

參考自：
inline-format
【譯】Vertical-Align: All You Need To Know