H5：消除div里面img的缝隙

当我们将img标签放于div中，仔细查看会发现img底部和div底部有一道很小的缝隙。

那么如何解决这个问题呢？

 

三种方式：

1、定义容器里的字体大小为0

2、图片img标签display:block

3、定义图片img标签vertical-align:bottom或vertical-align:middle或vertical-align:top

 

原因：

        图片文字等行内元素默认是和父级元素对齐方式为baseline，而baseline和父级底边有一定距离。这个距离和 font-size，font-family 相关。所以，处理方式就三种思路，按块级元素处理（方式2），对齐方式不为baseline（方式3），距离设为0（方式1）。

       其实不只div，其他的block元素中包含img也会有这个现象，处理方式思路同上。