img 固定在父容器底部_img图片与容器下边界的缝隙的解决方式

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

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

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

.css_img_main{border: 1px solid #f00; width: 475px;}

我们看到图片的下边界与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也会有这个现象。