当你书写以下代码
<img src="balbal.." />
<div></div>
你会发现<img>距离<div>隔了几个空白像素
那么 Q1:这些空白像素如何产生的？
A1:这是因为 水平方向上的元素垂直对齐的方式 造成的。
通常情况，能在一行显示的元素，display应为inline或者line-block。
如果一行上的元素高矮不一致，那么应该如何对齐这些inline?
css提供了vertical-align来确定这些元素是如何对齐的。
该属性默认值为baseline 即字母x的底部，来对齐。
而字母x，本身是有高度的，自然就出现了额外的空隙
Q2:如何消除这些空隙？
A2：已经知道了原因，那么解决就很简单了
1.display:block 脱离vertical-align的影响
2.给<img>的父元素设置 font-size:0 字体没有了size 空隙也就自然消失了
3.给<img>的父元素设置line-height:0 行高 也可以
4.既然是因为baseline搞的鬼，那么把<img>的vertical-align设置为top 也可以消灭空隙。
原文：http://www.cnblogs.com/splitgroup/p/7003919.html