最近面试遇到一个问题，感觉还是比较意思的，就记录一下。
背景：
在div中包裹图片和一段文本，会发现img下面有一丢丢间隙
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.main{
background-color: #efefef;
}
img{
background-color: #f00;
}
</style>
</head>
<body>
<div class="main">
<img src="https://mmbiz.qpic.cn/mmbiz_png/e1S3nJhAxM6eFMk7ngkQ3kuSGmVEWdAnMCBFmEPII4wJMxfUU3ot5rH00ERrL83ey8bIKen4wskke9riarFY33Q/0?wx_fmt=png" alt="">我只是测试一下
</div>
</body>
</html>问题：
这是什么原因造成的？怎么解决？
造成原因：
图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课），而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。
解决办法：
将img的vertical-align设置为middle
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
