我們很多個人博客網站都會廣告位投放一些圖片廣告，在網頁設計中，圖片是不可缺少的素材，但是在 div 標簽里面放入 img 圖片的話，有時候會在圖片的下方出現一行空間的區域，如果單純的圖片不醒目或是圖片所在的位置不重要的話，我們可以不去理會，但是做為一個完美型的頁且不太會前端的我來說，出現這個問題是忍無可忍的，由于廣告位平時背景色是白色，所以從未關注過圖片廣告下方有空白。剛才試著改變廣告位背景色為紅色后才發現廣告位內的 img 圖片下方有空白，具體見下圖：

經過檢查廣告位的 CSS 代碼沒有發現什么問題，至于 DIV 標簽內的 img 圖片下方有空白的原因，倒是沒有深入學習，好像大概是說圖片 display 屬性默認是 inline，vertical-align 屬性默認是 baseline 的原因所以才會有空白。在?HTML5?與 CSS3 中，DIV 標簽中的圖片也就是 IMG 標簽的默認 vertical-align 屬性為 baseline，而這個 baseline 在 css2 的文檔中有這么一句解釋，翻譯過來也就是一個 inline-block 元素，如果里面沒有 inline 元素，或者 overflow 不是 visible，則該元素的基線就是其 margin 底邊緣，否則，其基線就是元素里面最后一行內聯元素的基線。其實原因什么不重要，重要的是解決辦法。想要去除 DIV 標簽內的 img 圖片下方的空白，以下幾種方法比較好，所以特別推薦給大家。

1、將圖片轉換為塊級對象可去掉下邊空白

給圖片單獨設置或添加一個 display 屬性，如下方代碼

img {display:block;}

2、設置圖片的垂直對齊方式

即設置圖片的 vertical-align 屬性為“top，text-top，bottom，text-bottom”也可以去掉下邊空白。比如下面的代碼，也可去除圖片下方的空白像素

img{vertical-align:top;}

3、改變父對象的寬和高的屬性

如果父對象的寬、高固定，圖片大小隨父對象而定，那么可以添加以下的一個屬性來去掉圖片下面的空間像素，來段示例代碼,類 divimg 為圖片父元素的類名：

.divimg{width:88px;height:31px;overflow:hidden; }

4、為圖片設置浮動屬性去掉空白

示例代碼如下(此方法適合在圖文混排的文章中使用)：

img {float:left;}

5、設置父對象的文字大小為 0px

CSS 示例代碼(這里的 divimg 為圖片父元素的類名)：

.divimg{font-size:0;}

這個方法不推薦，如果圖片的父元素中沒有文本內容還好說，但如果含有文本內容的話，會造成布局混亂。

6、取消圖片標簽和其父對象的最后一個結束標簽之間的空格

這個方法要強調下，在實際開發中該方法可能會出亂子，因為在寫代碼的時候為了讓代碼更體現語義和層次清晰，難免要通過 IDE 提供代碼縮進顯示，這必然會讓標簽和其他標簽換行顯示，比如說 DW 的“套用源格式”命令。所以說這個方法可以供我們了解出現 BUG 的一種情況。

總結

上面，給出了六個解決 HTML 中 DIV 標簽中含有圖片，圖片下方出現空白像素的問題的解決方法，在這里我推薦第一種為每個圖片設置 display:block 的方法，具體解決方案的還得各位見招拆招了。

總結

以上是生活随笔為你收集整理的HTML5清除2个div标签的空白,DIV标签里面IMG图片下方留有空白怎么办的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。