如何去掉容器中图片下方自动产生的距离

如何去掉容器中图片下方自动产生的距离

一、问题展示：默认情况下，容器中的图片在图片底部会自动产生一个间隔距离。
在页面中制作一个<div></div>标记对，在该标记对内部放置一个图片，并为这个<div></div>标记对利用CSS属性设置背景颜色。代码如下所示。

<div style=”background-color:#ff5857;”>
<img src=”images/01.jpg” />
</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;}
上述代码将 标记变为了一个块级元素。
四、解决方案3：调整line-height属性的取值：
当把line-height属性的取值设置为0时，则文字之间的间距较小。尽管图片的垂直对齐方式依然为基线对齐，但是文字的基线不足以显示出来，所以就看不到这个小距离了。实现代码如下所示。
div{line-height:0;}
注意，这个属性不适用于图片标记的，应该用于图片所在的容器标记对之上，以保证该容器内部的文本行距为0。
五、解决方案4：调整font-size属性的取值：
如果将font-size属性的取值设置为0，也可以像解决方案3那样将文本的大小调小，则文本的基线就不足以显示出来了。实现代码如下所示。
div{font-size:0;}
同理，该属性的设置也需要在图片所在的容器标记对之上实现。

容器中图片底部小距离的解决方案