在網頁設計中,圖片是不可缺少的素材,但是在div標簽里面放入img圖片的話,有時候會在圖片的下方出現一行空間的區域,如果單純的圖片不醒目或是圖片所在的位置不重要的話,我們可以不去理會,但是做為一個完美型的頁且不太會前端的我來說,出現這個問題是忍無可忍的,馬上上百度查資料,干掉它。

圖片下面出現的空白像素

国产视频app 比如下面的一段HTML圖片加載的代碼

<div>
    <img src="xxx.jpg" />
</div>

国产视频app 這段代碼,在網頁中顯示時,會在圖片的下方出現一行空間的像素空間。

国产视频app 如下圖,箭頭所示的一樣,整張圖片的底部與邊框有著與其它三個邊框有著,不同寬度的像素空白。

這個網頁圖片下面出現空白像素的問題該如何解決呢?

圖片下面出現空白像素,網頁圖片下方出現空白一行,網站圖片下方空白

網頁圖片下面出現空間像素的原因

在HTML5與CSS3中,DIV標簽中的圖片也就是IMG標簽的默認vertical-align屬性為baseline,而這個baseline在css2的文檔中有這么一句解釋,翻譯過來也就是一個inline-block元素,如果里面沒有inline元素,或者overflow不是visible,則該元素的基線就是其margin底邊緣,否則,其基線就是元素里面最后一行內聯元素的基線。

国产视频app 圖片下方空白像素解決方法

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

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

display:block;

示例代碼

img {display:block;}

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

即設置圖片的vertical-align屬性為“top,text-top,bottom,text-bottom”也可以去掉下邊空白。

比如下面的代碼,也可去除圖片下方的空白像素

img{vertical-align:top;}

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

如果父對象的寬、高固定,圖片大小隨父對象而定,那么可以添加以下的一個屬性來去掉圖片下面的空間像素: 

overflow:hidden;

來段示例代碼,類divimg為圖片父元素的類名

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

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

示例代碼如下

img {float:left;}

此方法適合在圖文混排的文章中使用。

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

CSS示例代碼

.divimg{font-size:0;}

這里的divimg為圖片父元素的類名。 

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

看看效果

上面,給出了五個解決HTML中DIV標簽中含有圖片,圖片下方出現空白像素的問題的解決方法,在這里我推薦第一種為每個圖片設置display:block; 屬性的方法,我本人的博客(飛鳥慕魚博客)也是用的這種方法,效果圖如下。

圖片下面出現空白像素,網頁圖片下方出現空白一行,網站圖片下方空白

圖片1

圖片下面出現空白像素,網頁圖片下方出現空白一行,網站圖片下方空白

圖片2

提示一下,上圖示例中用到了,本站的一個阿里云活動廣告圖片的截圖,此活動還有九天的時間就結束了,如果想建立自己獨立博客,或是需要阿里云ECS的用戶,不妨云參與一下活動,優惠多多哦!