去掉div下的img底部的缝隙

原因

• 去掉图片底部的空白间隙：img前后有空格，而该空格的line-height有默认值，img元素的vertical-align的默认值为baseline，也就是基线对齐，img的底部对齐文字的底部

解决方案有

1. 让img的vertical-align失效，vertical-align只对block块级元素无效，设置img的display为block
2. 让img的vertical-align选其他值，例如top,bottom,middle
3. 直接修改外层div的line-height，让其值小于空格的默认line-height
4. 设置外层div的font-size为0

知识点

1. vertical-align的百分比是相对line-height,例如line-height为20px，vertical-align为10%，则最终计算vertical-align为20*10%=2px
2. vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化 而不得不变化的

详情见张大佬的博客

来源：oschina

链接：https://my.oschina.net/u/3407699/blog/1928382