【技术等级】中级

【承接文章】《CSS内联元素垂直对齐的解决方案，vertical-align属性详解》

本文重点讲解利用CSS技术处理容器中图片底部产生的小间隔，从原理上分析这个小间隔是如何产生的。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

一、问题展示：默认情况下，容器中的图片在图片底部会自动产生一个间隔距离。

在页面中制作一个<div></div>标记对，在该标记对内部放置一个图片，并为这个<div></div>标记对利用CSS属性设置背景颜色。代码如下所示。

<div style=”background-color:#ff5857;”>

<img src=”images/01.jpg” />

</div>

图片在容器中，会在底部产生一个距离

为什么要为容器<div></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;}

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

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

文章预告

下一篇文章中，小海老师会为大家讲解CSS中有关背景的属性。对于继续想了解CSS属性取值和含义的同学们一定要注意查看。

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有七八篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。