小程序图片底部留白问题

图片底部留白问题

问题

• 最近在写小程序的时候，发现图片的下方总是会留有空白，这是因为图片的默认样式是inline样式，而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。
  

解决方法

• 1.把img变成块状元素，所以是否需要留白，可以用过padding来设置
• 2.因为是img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值为middle即可。

总结

• 但是自己使用的时候，发现上述两个办法都没办法解决小程序中图片留白问题(不知道是不是自己使用方法有问题)
  后面查询其他资料后发现只需要在图片的父元素设置font-size：0即可解决问题