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也会有这个现象,处理方式思路同上。

  

你可能感兴趣的:(H5,css)