說在前面:最近在學習張鑫旭大神的《css行高line-height的一些深入理解及應用》和《CSS深入理解vertical-align和line-height的基友關(guān)系》這兩篇文章的時候遇到一些問題，困擾了很久叶眉，如果有遇到相同問題的蹦肴，希望本文對你有所幫助，如果有理解錯誤浆兰，還請指出雨饺！更多內(nèi)容還請看荐吉，以上兩篇文章，比我講的更詳細剑逃，這里只分享自己的一些理解浙宜。

一、問題:

? div盒子(其他元素同)在未設定高度的時候蛹磺，高度由內(nèi)容的高度撐開粟瞬。好像這句話沒什么問題，就像下面一樣：

01.png

   * {
         margin: 0;
         padding: 0;
     }
div {
         width: 200px;
         border: 1px solid;
         margin: 50px auto;  
     }
img {
       width: 100px;
    }

<div>
     <img src="/Pictures/Saved Pictures/路飛.jpg" alt="">
</div>

? 但細心的你一定發(fā)現(xiàn)萤捆，為什么圖片的底部邊緣怎么沒有和div的底部邊挨在一起裙品，不是說div的高度在未設定的情況下,高度由內(nèi)容的高度撐開嘛俗批？

02.png

? 首先這句話沒有錯，但為什么會有這個問題呢市怎？

? 這里就和vertical-align有關(guān)系了,圖片(行內(nèi)塊元素同)默認和文字的對齊方式baseline岁忘，也就是說圖片是基于基線對齊,那基線時什么呢？這里就又和line-height又有關(guān)了区匠。

? 這里直接用大神的話：

“行高”顧名思意指一行文字的高度干像。具體來說是指兩行文字間基線之間的距離〕叟基線實在英文字母中用到的一個概念麻汰，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線戚篙，是a,c,z,x等字母的底邊線五鲫。下圖的紅色線即為基線。

base_line.jpg

? 如果對于行高有一定理解的你會問岔擂，在div盒子里面沒有文字位喂，怎么會和文字的基線對齊呢？這里可以理解為了讓圖片和文字對齊乱灵，在圖片(行內(nèi)塊)前后有個透明字符存在且寬度為0塑崖，不占位置，方便的圖片(行內(nèi)塊)在垂直方向的對齊阔蛉，為了方便理解我們可以自己加一個真實的字符弃舒，情況也是相同的，請看：

03.png

? 所以這里 div的高度 = 內(nèi)容的高度 = 圖片的高度 + 透明字符的高度状原，但這個等式不嚴謹，不是完全相等苗踪，還請看下面颠区。

二、多出來的高度是什么?

? 盒子的高度是怎么來的呢通铲？

? 答毕莱；盒子的高度是由所有行框高度累加起來的。

04.png

? 注意：文本框內(nèi)的線與線的距離畫的不是很嚴謹

這里還要解決兩個問題：什么是行內(nèi)框颅夺？什么行框朋截？

行內(nèi)框：

1.行內(nèi)元素寬高組成的框或者行內(nèi)塊寬高形成的框；

2.行內(nèi)元素的行內(nèi)框的高度等于line-height

3.行內(nèi)塊的行內(nèi)框的高度等于圖片的高度 + padding + border

行框：

1.由所有的行內(nèi)框組成的吧黄；

2.==行框的高度最高的行內(nèi)框頂部 到 最低行內(nèi)框的底部之間的距離==

那么我們現(xiàn)在就可以很清楚的知道部服，下面多出來高度的部分其實是 基線 到 文本行框距離。

05.png

三拗慨、怎么解決這個問題?

? 知道多出來的部分高度是什么就很好解決了廓八。

? 在還是圖片(行內(nèi)塊)默認vertical-align：baseline情況下奉芦，我們可以讓文本行內(nèi)框的行高足夠小，至少要使行高小于等于中線到基線的距離(文本默認在文本行內(nèi)框中垂直居中)剧蹂，這樣文本行內(nèi)框的底部與基線重合或者在基線之上声功。在文本的基線和它的行內(nèi)文本框底部重合的時候，最低的行內(nèi)框是 圖片文本框(和文本的基線對齊) 和 文本行內(nèi)框宠叼；文本的行內(nèi)框的底部在基線之上時先巴，最低的就是圖片文本框了。這兩種情況下外面div的高度就和圖片的高度相等了冒冬。

寫成代碼的話可以：

1.直接控制line-height的值伸蚯，line-height=0 ;

06.png

* {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            line-height: 0;
            
        }
        img {
            width: 100px;
        }

<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">
        <span>x</span>
    </div>

2.間接控制line-height行高等于0，可以讓font-size = 0 窄驹。

07.png

 * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            /* line-height: 0; */
            font-size: 0;
            
        }
        img {
            width: 100px;
        }

<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">       
        <span>x</span>
    </div>

四朝卒、其他方法

? 在理解多余出來的高度是怎么來的之后，我們還可以用其他方法來去掉這個多余的高度乐埠，使圖片（行內(nèi)塊）不基于baseline對齊就好了抗斤，比如top、middle丈咐、bottom等等瑞眼，或者解決改變圖片的(行內(nèi)塊)的顯示模式為block。

五 棵逊、待續(xù)

? 迷迷糊糊伤疙，說了自己的一些理解，有的問題還沒講到辆影，只能待有空了再補上??

?