CSS學習筆記－圖片img與父元素div之間的間隙解決

前言

以前在寫網頁的時候有一個展現圖片的需求,我使用一個div包裹一個img,可是在瀏覽器中預覽的時候碰到了一下的問題,

仔細看,圖片和div之間有間隙。
下面貼上簡易的代碼

<div class="content">
        <img src="./img/user.jpg">
</div>

.content{
    float:left;
    margin:100px auto; 
    background:pink;
}

我外層容器content設置浮動,按浮動元素會收縮的原理,本不該該出現這條粉色的間隙,但爲何這裏會有呢？以後去網上查了一下,其中涉及到了line-height以及vertical-align的問題。

正文

• vertical-align

vertical-align 指定了行內（inline）元素或表格單元格（table-cell）元素的垂直對齊方式(摘錄自MDN)。

vertical-align的取值中有top、middle、baseline、bottom四個值,他們分別對應了

vertical-align中默認值是baseline也就是說圖片的下邊緣實際上是和藍色那條線對齊的,而文字元素<span>自己也有高度,因此會多出那麼一部分空白的地方，也就是底部綠色線到藍色線之間的距離。

那麼爲何在沒有文字的狀況下圖片也會有底部的間隙,那是由於在HTML5文檔聲明下，塊狀元素內部的內聯元素的行爲表現，就好像塊狀元素內部還有一個（更有可能兩個-先後）看不見摸不着沒有寬度沒有實體的空白節點(摘錄自張鑫旭的博客),因此默認vertical-align爲baseline的圖片會和父div之間存在空隙。

知道這一點，如今問題就好解決了，最直接的能夠是

設置img標籤的vertical-align

img{
    vertical-align:bottom;//middle和top也均可以
}

設置img標籤display:block

前面正文的開頭說過vertical-align是設置行內（inline）元素或表格單元格（table-cell）元素的垂直對齊方式,因此設置img爲塊級元素時就不會存在baseline對齊的問題了。

img{
    display:block
}

設置父元素div字體大小爲0

.content{
    float:left;
    margin:100px auto; 
    background:pink;
    font-size:0px;
}

<number>

The used value is this unitless [<number>
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number) multiplied by the element's font size. The computed value is the same as the specified <number>
. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance. 
**所用的值是無單位數值[<number>
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)乘以元素的font size。計算出來的值與使用數值指定的同樣。大多數狀況下，使用這種方法設置line-height是首選方法，在繼承狀況下不會有異常的值。** (摘錄自MDN)

line-height在不設置單位時是經過與font-size相乘來計算的,設置font-size爲0,line-height也爲0,而那一端多餘的間隙(baseline和bottom之間的差值)也和line-height有關，因此天然而然間隙就消除了。

結尾

這是我解決img與父div空隙中的一點總結,其實深挖了line-height和vertical-align還有更多的內容,我一會兒消化不過來,今天先到這裏,往後有更深刻了解了再慢慢補充,以上內容有錯誤的地方歡迎小夥伴們來拍磚。