今天在给图片弄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也会有这个现象。