img底邊空隙問題原因和解決方案(修改)


 

轉載自:http://www.cnblogs.com/minelucky/p/4746071.html
 
練習切圖時發現img和父級div之間總是有2px空隙(chrome),上網搜索解決。
 

圖片IMG與容器下邊界之間有空隙怎么辦?這里介紹3種簡單的解決方法。

 

第一,給圖片img標簽display:block。

1
img{display:block}

 

第二,定義容器里的字體大小為0。

div{
  width:110px;
  border:1px solid #000000;
  font-size:0px;
}

 

第三,定義圖片img標簽vertical-align:bottom,vertical-align:middle,vertical-align:top

1
img{vertical-align:bottom}

 

其他還有把圖片下邊距設為負值和改寫HTML標簽的排列。我覺得前三種就完全可以解決了。

造成圖片在IE下與容器下 邊界有空隙的原因在網上搜了一下,發現old9說的圖片文字等inline元素默認是和父級元素的baseline對齊的,而baseline又和父級底 邊有一定距離(這個距離和 font-size,font-family 相關,不一定是 5px),所以設置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li,其他的block元素中包含img也會有這個現象。

至於HTML屬性align="center"(對於圖片瀏覽器會處理成align="middle"),就相當於vertical-align:middle; 所以道理也是一樣的,只要vertical-align不取baseline,這個空隙就消失了。

修改(更新)部分: 

造成的原因:

1.怎么出現

  在HTML5文檔聲明下,塊狀元素內部的內聯元素的行為表現,就好像塊狀元素內部還有一個(更有可能兩個-前后)看不見摸不着沒有寬度沒有實體的空白節點

<div><img src = '1.jpg'/></div>

 

2.圖片下有空隙的深入原因

  • —vertical-align默認的對齊方式是baseline.(x字母的下邊緣是基線) 所以對齊的是x的下邊而不是所有文字的最下邊
  • —文字的高度,文字的高度由line-height決定(line-height多數瀏覽器[Georgia字體下]默認為font-size的1.14倍,如果未設定font-size,那既是基准值16px的1.14倍).所以空白節點有了line-height.

針對這些原因提出解決方案:

1.既然是塊狀元素的內聯元素才這樣,就對元素img 顯示為塊狀元素img{display:block}

2.既然img的對齊方式是默認的baseline,解決方案是改為img{vertival-align:bottom}

3.因為后面的空白節點有line-height(line-height與font-size有關);解決方案是div{font-size:0}或者是div{line-height:0},若有其他文字時,這個方法不能顯示字體.

個人覺得對img處理的解決方案更好,不會影響到其他元素.既1.2種解決方案


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com