最近面试遇到一个问题,感觉还是比较意思的,就记录一下。
背景:
在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