img 标签下多余空白的解决方法
有些时候，我们会发现div排版布局中，我们并没有设置padding和margin，可img标签下方还是会出现多余的空白，这是为什么呢？
其实，在浏览器中，图片默认的vertical-align是baseline，如图：
可以看到图片是与字母x的下边距对齐的，也就是baseline。
那么，我们该如何去掉这多余的空白呢？
方法如下：
1.将图片转换为块级
img{ display:block;}
2.设置图片的垂直对齐方式
img{ vertical-align:top}
3.设置父级的文字大小为0px
font-size:0;
4.设置父级的属性
overflow:hidden;
5.取消图片标签和其父级的最后一个结束标签之间的空格
关注”全栈技术杂货铺“
