div和img之间的缝隙问题

这次做的项目，客户说，banner图的上下之间不要留有空隙，仔细一看才发现，上下竟然都有空隙。审查元素，发现所有的div,img的padding和margin都是0，对于这个间隙究竟是如果产生的真的是找不到原因。

网上查了一下，类似的问题还蛮多的。

解决方法基本是四种：

1.将img设置为block;

这个基本可以解决img和div下方的缝隙问题。

2.设置img的竖直对齐方式

v-align:bottom;

3.设置父div的font-size:0

4.设置外层的div的line-height:0

推荐使用第一种方式。

但是本次项目奇怪的地方在于上下皆有缝隙，开始时，上面的缝隙可以通过margin-top:-10px解决。但是后来改了代码结构后，此方式也不行。网上找了很多，亦没有解决方式。

因此采用定位的方式解决：

设置父元素的position为relative

子元素img的position为absolute;设置top为0，完美解决此问题。

为了避免影响其他布局，设置下div的高度为img的高度。

问题出现的原因依旧没有找到，只是解决了这个问题。解决问题的方式有很多，不过郁闷的是常常解决了问题，却不知道为了是怎样发生了，不利于日后写代码的过程中去避免这些问题。