前言
img一直以來有一個很大的問題就是底部空白間隙，一直以為是img默認樣式造成的薇芝，后來查了相關的資料蓬抄，才弄清楚為什么會產(chǎn)生這樣的結(jié)果。
首先仔細看下圖中的邊框與img的間隙夯到。
用過ps文字工具的同學頭知道嚷缭，在使用文本工具中會出現(xiàn)如下的現(xiàn)象，字母或者漢字會超出那條基線。
而在CSS中也有那條線阅爽，而且inline默認的垂直對齊方式vertical-align默認值是baseline(基線對齊)路幸，也是以x字母的下方為基準。（在平面設計中付翁，字體設計也同樣基于這樣的一個原則简肴，x的下方為基線）
觀察上方的代碼，字體的大小直接影響著超出基線間隙百侧，所以字體大小可以影響基線間隙砰识。
同時行內(nèi)本身的
line-height是會移動基線的（文字垂直居中可以通過line-height實現(xiàn)）。所以行高也是可以影響基線的位置佣渴。
解決方案
知道底部間隙的原因是因為行內(nèi)元素默認的垂直對齊方式為baseline造成的字體下方會有間隙辫狼，所以解決起來就挺好辦了。一切的原因都是inline行內(nèi)屬性在作怪辛润，只要對癥下藥即可膨处。
目前有4種非常簡單的解決方案。
第一種方法：修改img行內(nèi)元素的垂直居中方式砂竖，讓它不在以基線對齊真椿。
img {
vertical-align: bottom;
}
效果如下：
第二種方法：修改行高，使行高變小晦溪，這樣基線下方的位置基本可以忽略瀑粥。
div {
line-height: 0px;
}
效果如下：
第三種方法：修改img行內(nèi)元素的字體大小，基線的下方間隙是部分字體超過基線下方而產(chǎn)生的三圆，如果把父元素的font-size變的超小狞换，基線的下方距離將忽略不計。
div {
font-size: 0px;
}
效果如下：
如果把字體改的非常大舟肉，那么間隙又會出現(xiàn)修噪。
div {
font-size: 80px;
}
效果如下：
第四種方法：直接讓img變成塊級元素，不在受行內(nèi)基線的影響路媚。
img {
display: block;
}
/* 浮動也可以讓元素變成塊級 */
img {
float：left;
}
/* 只要能變成塊級的屬性都可以 */
...
效果如下：
結(jié)語
在深入研究img間隙原因之前黄琼，我一直使用的是display: block來控制間隙，在深入學習之后整慎，才發(fā)現(xiàn)有這么多方式可以解決脏款，懂得原理很重要。所以學習一定要知其所以然裤园。
