img底部有间隙的问题的原因
行内元素默认对齐的方式vertical-align是baseline，即基线对齐，哪一条是基线呢，如图，以x字母下方的那条线即为基线。
解决方案
行内元素 => 非行内元素
既然行内元素的对准方式是基线，那我们就让img变成非行内元素即可。不管是设置为display:block还是display:flex或者float:left,只要能够让它变成非行内属性都可以。
font-size:0 || line-height:0
基线是以x字母下方的那条线为基线，如果没有字的话，img就不需要对准基线，但是我们即使没有输出文字，也会默认按照有文字的方式去对准，所以我们让字母消失的更彻底一点。让img的父容器设置font-size:0。毕竟文字也不在img里面~
同理也可以设置line-height:0,注意这里并不会让文字不可见，只是让文字的行高变成了0，对准基线的时候也就相当于不用对准文字。
vertical-align：bottom
既然img默认是对准基线，那我们就更改img的基线的位置，让img的基线对准bottom即可。
