在父容器div中图片下方有一条空隙问题
问题:
<div><img src="mm1.jpg"></div>
然后,表现就是一张图片呈现,类似下面这样:
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)
恩,看上去很正常,一切都是理所当然。然而,如果我们给这个<div>
元素增加一个背景色,例如淡蓝色:
<div style=""><img src="mm1.jpg"></div>
则会是下面这样:
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)
会发现图片下面有一段空白空间:
想必大家都遇到过类似问题,不知大家有没有思考过,为什么图片下面有留有一段间隙呢?
实际上,这段空白间隙就是vertical-align
和line-height
携手搞的鬼!
首先,大家一定要意识到这么一点:对于内联元素,vertical-align与line-height虽然看不见,但实际上「到处都是」!
原因:
vertical-align
默认的对齐方式是?- 后面zxx文字的高度从何而来?
上面2个问题就很简单了:
vertical-align
默认值是baseline
, 也就是基线对齐。而基线是什么,基线就是字母X的下边缘。所以,妹子图片的下边缘就和后面zxx中的字母x
下边缘对齐(见下图)。而字符zxx
本身是有高度的,对吧,于是,图片下面就留空了。- 而
zxx
文字的高度是由行高决定的。
因此,简单的图片下面留白行为表现,本质上,就是vertical-align
和line-height
背地里造成的。
基本解决办法:
1. 让vertical-align失效
图片默认是inline
水平的,而vertical-align
对块状水平的元素无感。因此,我们只要让图片display
水平为block
就可以了,我们可以直接设置display
或者浮动、绝对定位等(如果布局允许)。例如:
img { display: block; }
则妹子就会变这样:
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)
下面的空隙不见了。
2. 使用其他vertical-align值
告别baseline
, 取用其他属性值,比方说bottom
/middle
/top
都是可以的。
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)
3. 直接修改line-height值
下面的空隙高度,实际上是文字计算后的行高值和字母x下边缘的距离。因此,只要行高足够小,实际文字占据的高度的底部就会在x的上面,下面没有了高度区域支撑,自然,图片就会有容器底边贴合在一起了。比方说,我们设置行高5像素:
div { line-height: 5px; }
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)
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; }
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)