默認(rèn)情況下，容器中的圖片在容器底部會(huì)自動(dòng)產(chǎn)生一個(gè)間隔距離。要想把這個(gè)距離清除掉，首先要明白這個(gè)距離的產(chǎn)生原理，也即是說為什么會(huì)產(chǎn)生這個(gè)距離。圖片作為內(nèi)聯(lián)元素，其默認(rèn)的vertical-align屬性的取值為baseline，也就是基線對(duì)齊。這種垂直對(duì)齊方式是圖片的底部與文本的基線對(duì)齊。這就是產(chǎn)生這個(gè)小距離的根本原因。
產(chǎn)生的小距離是圖片與文本基線對(duì)齊后，文本基線下方的文字部分，也就是四線三格的第三格，即基線。

四線三格的第三格，即基線

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對(duì)成都展覽展示等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

既然知道了這個(gè)距離產(chǎn)生的原因，那么就容易處理了。

解決方案1：調(diào)整vertical-align屬性的取值：
既然這個(gè)距離是由圖片的vertical-align屬性的默認(rèn)取值為baseline產(chǎn)生的，那么就可以調(diào)整該屬性的取值不再是baseline即可。
將圖片的vertical-align屬性設(shè)置為bottom、middle、top均可。實(shí)現(xiàn)代碼如下所示。

divimg{vertical-align:middle;}

解決方案2：調(diào)整display屬性的取值：
我們知道，vertical-align屬性只適用于內(nèi)聯(lián)元素。那么只需要將圖片由內(nèi)聯(lián)元素改為塊級(jí)元素即可。
修改元素的狀態(tài)可以采用CSS技術(shù)中的display屬性。實(shí)現(xiàn)代碼如下所示。
divimg{display:block;}

上述代碼將標(biāo)記變?yōu)榱艘粋€(gè)塊級(jí)元素。

解決方案3：調(diào)整line-height屬性的取值：
當(dāng)把line-height屬性的取值設(shè)置為0時(shí)，則文字之間的間距較小。盡管圖片的垂直對(duì)齊方式依然為基線對(duì)齊，但是文字的基線不足以顯示出來，所以就看不到這個(gè)小距離了。實(shí)現(xiàn)代碼如下所示。
div{line-height:0;}

注意，這個(gè)屬性不適用于圖片標(biāo)記的，應(yīng)該用于圖片所在的容器標(biāo)記對(duì)之上，以保證該容器內(nèi)部的文本行距為0。

解決方案4：調(diào)整font-size屬性的取值：
如果將font-size屬性的取值設(shè)置為0，也可以像解決方案3那樣將文本的大小調(diào)小，則文本的基線就不足以顯示出來了。實(shí)現(xiàn)代碼如下所示。

div{font-size:0;}

同理，該屬性的設(shè)置也需要在圖片所在的容器標(biāo)記對(duì)之上實(shí)現(xiàn)。
本文標(biāo)題：圖片在DIV中產(chǎn)生底部間隔的解決方法
本文鏈接：http://weahome.cn/article/echdip.html