图片与设置边框的div底部存在间隙

这样一个布局：

设置了边框的div里面嵌入一个img（这里设置的max-width是为了让图片的宽适应div的宽）。

页面效果：

div与img之前产生了一个间隙，怎么回事呢？

在某博文见到这样一个回答：

好吧，这竟然是因为英文字母的尾巴，也是万万没想到啦~

本质上的原因应该是：默认vertical-align属性值为默认为baseline。即内联元素的默认垂直对齐方式是和基线对齐，并不是和底部对齐。

不过，总归是因为img是inline元素造成的。

那么，怎么解决?

方案一：既然是因为字体，那么我们可以给div设置 font-size:0 （当div内部没有文字时）

方案二：img设置 vertical-align:bottom （vertical-align 指定为非baseline——非基线，事实上vertical-align设为top或者middle都能达到同样的效果）

方案三：img设置 display:block

方案四：div设置 line-height:0 （当div内部没有文字时）

可以看到，四种方案设置之后都可以去除间隙。

这里有个关于间隙的讲解也比较详细，可参考：https://www.jianshu.com/p/7b7ae3cc2a72