昨天慧慧和大家探讨了图片与图片之间(行内元素与行内元素之间)因为代码换行而产生的间距问题的解决方案,今天我们继续来深究页面引入图片带来的另外一个问题,图片与div之间的间距
*{
margin:0;
padding:0;
}
p{
width: 316px;
height: 50px;
background-color: red
}
<img src="../img/hh_31.jpg" alt="">
<div></div>
结果如下
细心的小伙伴会发现,图片与div之间又一个很魔性的间距,那怎么解决这个bug呢?给图片加个属性vertical-align: top ,这个问题就迎刃而解了
*{
margin:0;
padding:0;
}
img{ vertical-align: top }
p{
width: 316px;
height: 50px;
background-color: red
}
快去试试吧