霍者博客

图片在DIV中产生底部间隔的解决方法

默认情况下,容器中的图片在图片底部会自动产生一个间隔距离。

要想把这个距离清除掉,首先要明白这个距离的产生原理,也即是说为什么会产生这个距离。

图片作为内联元素,其默认的vertical-align属性的取值为baseline,也就是基线对齐。这种垂直对齐方式是图片的底部与文本的基线对齐。这就是产生这个小距离的根本原因。

产生的小距离是图片与文本基线对齐后,文本基线下方的文字部分,也就是四线三格的第三格,即基线

既然知道了这个距离产生的原因,那么就容易处理了。

解决方案1:调整vertical-align属性的取值:

既然这个距离是由图片的vertical-align属性的默认取值为baseline产生的,那么就可以调整该属性的取值不再是baseline即可。

将图片的vertical-align属性设置为bottom、middle、top均可。实现代码如下所示。

div img{vertical-align:middle;}

解决方案2:调整display属性的取值:

我们知道,vertical-align属性只适用于内联元素。那么只需要将图片由内联元素改为块级元素即可。

修改元素的状态可以采用CSS技术中的display属性。实现代码如下所示。

div img{display:block;}

上述代码将<img />标记变为了一个块级元素。

解决方案3:调整line-height属性的取值:

当把line-height属性的取值设置为0时,则文字之间的间距较小。尽管图片的垂直对齐方式依然为基线对齐,但是文字的基线不足以显示出来,所以就看不到这个小距离了。实现代码如下所示。

div{line-height:0;}

注意,这个属性不适用于图片标记的,应该用于图片所在的容器标记对之上,以保证该容器内部的文本行距为0。

解决方案4:调整font-size属性的取值:

如果将font-size属性的取值设置为0,也可以像解决方案3那样将文本的大小调小,则文本的基线就不足以显示出来了。实现代码如下所示。

div{font-size:0;}

同理,该属性的设置也需要在图片所在的容器标记对之上实现。

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/739.html,标题:图片在DIV中产生底部间隔的解决方法

【我来说两句】
分享到:

相关文章:



评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。