很多初學(xué)html的小伙伴在寫(xiě)頁(yè)面的時(shí)候碰到過(guò)一個(gè)問(wèn)題，當(dāng)我們用一個(gè)div直接包裹img，img的下方會(huì)出現(xiàn)3px間距，如圖

為什么會(huì)出現(xiàn)這種情況呢？

      因?yàn)閕mg是一種類似text的標(biāo)簽元素，在結(jié)束的時(shí)候，會(huì)在末尾加上一個(gè)空白符（匿名文本），導(dǎo)致下方會(huì)多出來(lái) 3px 間距，其實(shí)我們?cè)趇mg右側(cè)添加一個(gè)span包裹住文本，現(xiàn)象會(huì)更明顯。

下面我們來(lái)解決這個(gè)問(wèn)題

第一種方法：

給div設(shè)置和img一樣的高度；

缺點(diǎn)：該方法不夠靈活，一旦img尺寸改變，我們要重新設(shè)置div的高度

第二種方法：

給img設(shè)置vertical-align為除baseline以外的值。

第三種方法：

給img添加display:block;

這個(gè)方法是我們比較常用，但需要注意，img一旦設(shè)置為塊，text-align:center；就不再生效，圖片的水平居中應(yīng)使用margin:auto;

第四種方法：

給img設(shè)置浮動(dòng)，設(shè)置浮動(dòng)會(huì)讓img脫離文檔流

缺點(diǎn)：父元素高度不會(huì)被img自動(dòng)撐開(kāi)

第五種方法：

給div設(shè)置font-size:0;

缺點(diǎn)：該方法會(huì)使div中的文字消失

上述五種方式同學(xué)們根據(jù)實(shí)際情況選擇使用即可，最后效果如圖所示

      對(duì)web前端培訓(xùn)班感興趣的同學(xué)可以來(lái)千鋒教育了解一下我們提供的HTML5大前端培訓(xùn)課程，全程名師面授指導(dǎo)，更有2周免費(fèi)試聽(tīng)不滿意不繳費(fèi)，歡迎同學(xué)們前來(lái)咨詢和學(xué)習(xí)。

第二種方法：

• 給img設(shè)置vertical-align為除baseline以外的值，常用