img图片与容器下边界的缝隙的解决方式

今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案。

通常在img图片的父级容器是块级元素时，就会造成如下的现象：

<style type="text/css">.css_img_main{border: 1px solid #f00; width: 475px;}style>
<div class="css_img_main"><img src="https://www.xiabingbao.com/upload/m0g236emp0ro7gi.jpg" alt="img">div>

我们看到图片的下边界与div中间有个小的缝隙，那么我们就得需要解决这个问题。如果不解决这个问题的话，那底部有个遮罩的话，那也就不能跟图片的下边界对齐了。

这里简单的介绍3个解决方案：

1. 给图片添加vertical-align属性 #

.main img{
	vertical-align : bottom; // top, middle
}

只要vertical-align的值是以上三个中任意的一个，就能解决缝隙的问题。

2. 定义容器里的字体大小为0 #

.main{
	font-size : 0;
}

这样也可以解决缝隙的问题。

3. 把图片设置为块级元素 #

.main img{
	display : block;
}

据说，图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。