img的間隙

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}
<div class="test">
    <img src="test.jpg" />
</div>

上述代碼產生的效果如圖所示，可是另人感到驚奇的是，img與div之間存在着一個間隙，這個間隙是怎麼產生的？應該怎麼解決？下面咱們一點點的探尋這個問題背後的一些原理：

問題產生：

這個問題產生主要是因爲baseline形成的，先來了解下baseline，這是一個在英文的文字排版中體現比較明顯的概念：

baseline只是在內聯元素中才有的概念，在塊元素中並無這種概念，也就是說只有在ifc下才會有這一律念，而且內聯元素的vertical-align的默認值就爲baseline，也就是根據基線對齊。
對應着baseline還有兩條標準線，分別爲bottom和top，下面這張圖說明了三條線所處的位置：

img是一內聯元素，其根據baseline對齊，那條間隙就是baseline到bottom的距離，既然如今問題搞清楚了，下面就來解決它：

解決問題：

解決這個問題有4種方法（歡迎你們補充，我只想到這4種）：

• line-height
  給div.test添加樣式line-height: 0px;就能夠解決這個問題，這個原理很簡單，由於line-height指的是bottom到top的距離，將其設置爲0也就是表明着baseline與bottom之間的距離爲0，天然那條間隙就消失啦；同理咱們能夠得出的就是指定font-size: 0px;也是能夠解決，由於line-height在不指定時值默認爲font-size * 一個係數(1.2 or other)，可是這種狀況下不能有文字出現。

• img變成塊元素
  文章前部分講到了baseline只是對於內聯元素而言，本身的給img添加樣式display: block;將其轉爲塊元素天然間隙就會消失，不過這樣也會產生一些反作用。

• 給div.test添加height
  這種方式比較簡單那就讓div.test只有圖片那麼高，這樣也會有反作用，文字可能會移除，就像下圖這樣：

• 改變vertical-align
  改變垂直對齊方式，好比指定vertical-align: bottomorvertical-align: toporvertical-align: middle，能夠很完美的解決這個問題，可是產生的效果值得讓人琢磨一番，下面就來解讀下：

理解vertical-align

先來改下最開始的代碼：

*{
    padding: 0px;
    margin: 0px;
    font-size: 24px;
}
.test{
    border: 1px solid red;
    width: 600px;
    margin: 10px 200px;
}
.test img{
    vertical-align: top;
}
<div class="test">
    <img src="test.jpg" />
    <span>zp1996<span>
</div>

效果如上圖所示，能夠發現的文字怎麼跑到了上面去，這是什麼鬼？只是改變了img的垂直對齊方式爲何會影響到span呢？
其實須要明白的是，不是img上去了，而是下去了，來分解下步驟解釋下這個理論：

第一步就是造成上圖這樣的效果，第二步就是給div.test添加一個img標籤，而且以top先對齊，因此就會產生有蠟筆小新的那個效果。
可是和實驗室學長討論時，學長說這個過程不符合dom順序編譯造成樹的流程啊，一想對啊，難道不是這樣嗎？誒不對啊，img是置換元素，它須要依賴其src屬性啊，而圖片加載的過程會比較慢，不能等着加載圖片而不去編譯後面的代碼吧，確定是用異步加載的吧，這麼想下上面拆分的那個過程是對的啊！到底瀏覽器真實的是否是這樣的呢不得而知，可是從效果來看應該是這樣的。

注: 這只是我的的一些想法，若有不對，歡迎指出