在父容器div中图片下方有一条空隙问题

问题：
<div><img src="mm1.jpg"></div>

然后，表现就是一张图片呈现，类似下面这样：

恩，看上去很正常，一切都是理所当然。然而，如果我们给这个<div>元素增加一个背景色，例如淡蓝色：

<div style=""><img src="mm1.jpg"></div>

则会是下面这样：

会发现图片下面有一段空白空间：

想必大家都遇到过类似问题，不知大家有没有思考过，为什么图片下面有留有一段间隙呢？

实际上，这段空白间隙就是vertical-align和line-height携手搞的鬼！

首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！

 

 

原因：

1. vertical-align默认的对齐方式是？
2. 后面zxx文字的高度从何而来？

上面2个问题就很简单了：

1. vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。所以，妹子图片的下边缘就和后面zxx中的字母x下边缘对齐（见下图）。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。
   
2. 而zxx文字的高度是由行高决定的。

因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height背地里造成的。

 

 

基本解决办法：

1. 让vertical-align失效
图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。例如：

img { display: block; }

则妹子就会变这样：

下面的空隙不见了。

2. 使用其他vertical-align值
告别baseline, 取用其他属性值，比方说bottom/middle/top都是可以的。

vertical-align:bottom vertical-align:middle vertical-align:top

zxx

3. 直接修改line-height值
下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。比方说，我们设置行高5像素：

div { line-height: 5px; }

zxx

4. line-height为相对单位，font-size间接控制
如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为大鸡蛋0, 本质上还是改变line-height值.

div { font-size: 0; }

zxx

 

 

更多详细的内容请参考： http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

 

 

转载于:https://www.cnblogs.com/brainworld/p/6530712.html