Wenzi

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

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

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

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

<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属性 #

.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也会有这个现象。

标签:css
阅读(663)
Simple Empty
No data