今天项目里面用到一个div下的img图片的下方有一小片明显的空白的问题,查了一下这个问题的原因,对img标签有了更加进一步的理解,原文:https://www.jianshu.com/p/2af064692505
产生这部分空白区域的原理。
图片的display属性默认是inline(我学习的时候是这样说的,不知道有没有上了堂假课),而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况(图片底部出现一个小留白区域)。
重点是解决方法:
方法一:把img变成块状元素,所以是否需要留白,可以用过padding来设置。
img {
display: block;
}
方法二:既然分析到img的vertical-align默认属性导致出现留白问题,所以直接修改vertical-align属性值就行咯。
img {
vertical-align: middle;
}
方法345感觉各自有缺陷,就不在这里列举了。总之知道是因为什么而引起这个问题就好解决了,有方法12就可以了。