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;