前言
img一直以來(lái)有一個(gè)很大的問(wèn)題就是底部空白間隙，一直以為是img默認(rèn)樣式造成的，后來(lái)查了相關(guān)的資料，才弄清楚為什么會(huì)產(chǎn)生這樣的結(jié)果。
首先仔細(xì)看下圖中的邊框與img的間隙。
用過(guò)ps文字工具的同學(xué)頭知道，在使用文本工具中會(huì)出現(xiàn)如下的現(xiàn)象，字母或者漢字會(huì)超出那條基線。
而在CSS中也有那條線，而且inline默認(rèn)的垂直對(duì)齊方式vertical-align默認(rèn)值是baseline(基線對(duì)齊)，也是以x字母的下方為基準(zhǔn)。（在平面設(shè)計(jì)中，字體設(shè)計(jì)也同樣基于這樣的一個(gè)原則，x的下方為基線）
觀察上方的代碼，字體的大小直接影響著超出基線間隙，所以字體大小可以影響基線間隙。
同時(shí)行內(nèi)本身的
line-height是會(huì)移動(dòng)基線的（文字垂直居中可以通過(guò)line-height實(shí)現(xiàn)）。所以行高也是可以影響基線的位置。
解決方案
知道底部間隙的原因是因?yàn)樾袃?nèi)元素默認(rèn)的垂直對(duì)齊方式為baseline造成的字體下方會(huì)有間隙，所以解決起來(lái)就挺好辦了。一切的原因都是inline行內(nèi)屬性在作怪，只要對(duì)癥下藥即可。
目前有4種非常簡(jiǎn)單的解決方案。
第一種方法：修改img行內(nèi)元素的垂直居中方式，讓它不在以基線對(duì)齊。
img {
vertical-align: bottom;
}
效果如下：
第二種方法：修改行高，使行高變小，這樣基線下方的位置基本可以忽略。
div {
line-height: 0px;
}
效果如下：
第三種方法：修改img行內(nèi)元素的字體大小，基線的下方間隙是部分字體超過(guò)基線下方而產(chǎn)生的，如果把父元素的font-size變的超小，基線的下方距離將忽略不計(jì)。
div {
font-size: 0px;
}
效果如下：
如果把字體改的非常大，那么間隙又會(huì)出現(xiàn)。
div {
font-size: 80px;
}
效果如下：
第四種方法：直接讓img變成塊級(jí)元素，不在受行內(nèi)基線的影響。
img {
display: block;
}
/* 浮動(dòng)也可以讓元素變成塊級(jí) */
img {
float：left;
}
/* 只要能變成塊級(jí)的屬性都可以 */
...
效果如下：
結(jié)語(yǔ)
在深入研究img間隙原因之前，我一直使用的是display: block來(lái)控制間隙，在深入學(xué)習(xí)之后，才發(fā)現(xiàn)有這么多方式可以解決，懂得原理很重要。所以學(xué)習(xí)一定要知其所以然。
