img底部空白以及多余的空白文本節點解決方案

1：img底部有空白的問題

img的css屬性display的默認值是inline，這樣會導致img的vertical-align的默認值是 baseline;

baseline又不是bottom,只是向四線三格中的第三條線對齊，不是向第四條線對齊；所以出現底部出現空白的地方說到底是第三條線到第四條線的距離；

 

要想去掉這段距離，只能從vertical-align下手：

　　1: 設置vertical-align：top/bottom/middle;

　　2: 設置line-height:0px 或 font-size:0px 間接影響vertical-align的值;

　　3: 設置img標簽為display:block 或 float：left,這樣就會影響到img的display默認值；

 

2：img渲染的時候會在后面多出現空白文本節點的問題

先看第一種寫法：

<div style="font-size: 12px;">
    <img src="../img/img.jpg"  alt="hh" style="width: 12px;height: 12px;" />
    我是歐健鋒
</div>

圖片和文字間還是有一點距離的；

 

第二種寫法：

<div style="font-size: 12px;">
    <img src="../img/img.jpg"  alt="hh" style="width: 12px;height: 12px;" />我是歐健鋒
</div>

圖片和文字間距離基本為0；

 

總結：出現上述的問題主要看img的末尾有沒有html標簽，如果沒有的話瀏覽器會自動渲染一個空白文本節點在img的后面；

解決方法：

1：像樓主這樣把后面的節點挨着img標簽

2：設置img標簽為浮動元素，float：left;

3：設置img的父元素的font-size：0px;