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

蚊子前端博客
发布于 2015-10-12 06:00
今天在给图片弄hover遮罩时,发现遮罩的下方与图片的下边界没有对齐,而是多了4px左右,这里就记录下几个解决方案

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

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

COPYHTML

<style type="text/css"> .css_img_main{border: 1px solid #f00; width: 475px;} </style> <div class="css_img_main"><img src="/demo/css-img-block/b.jpg" alt="img"></div>

img

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

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

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

COPYCSS

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

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

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

COPYCSS

.main{ font-size : 0; }

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

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

COPYCSS

.main img{ display : block; }

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

标签:
阅读(239) 评论(0)

公众号:

qrcode

微信公众号:前端小茶馆