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渲染的时候会在后面多出现空白文本节点的问题

先看第一种写法：

<img src="__IMAGE__/advepos/out.png" style="width:12%;margin-top:30px;margin-left:0px;" />
<button type="button" class="btn btn-link" data-this-val="广告位列表" id="down_excel" style="margin-right: 10px;margin-top: 20px;">导出Excel表</button>

第二种写法：

<img src="__IMAGE__/advepos/out.png" style="width:12%;margin-top:30px;margin-left:0px;" /><button type="button" class="btn btn-link" data-this-val="广告位列表" id="down_excel" style="margin-right: 10px;margin-top: 20px;">导出Excel表</button>

总结：出现上述的问题主要看img的末尾有没有html标签，如果没有的话浏览器会自动渲染一个空白文本节点在img的后面；

解决方法：

1：像楼主这样把后面的节点挨着img标签

2：设置img标签为浮动元素，float：left;

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