关于img的一个小知识点

这两天在撸代码的时候发现图片的最下面总是会留一条空白,刚开始不知道为什么,但是UI拿刀对我说去掉它,瑟瑟发抖的我找了下原因及解决方案. 

原因:img 是一个inline-block标签,而这个标签的vertical-align: middle;  因此才会出现这样的一个白条;

解决方案:原因找到了,方案就好搞了,把display设置为block;就好了,或者是根据情况重新设置vertical-align:的值;