解决img下边框留白

遇到过好几次这个问题，但总是解决之后下次就忘了，这次记录下来。。。

因为img是行内元素，所以他的vertical-align的默认值是baseline，所以他的对齐方式导致了下白边产生。

针对img的这个属性可以有两种解决办法：

1.把img变为块级元素

img {
	display：block；
}

2.更改img的对齐方式

img {
	vertical-align: middle;
}

或者 还有些小方法
3.更改父元素的字体大小
因为是img与文字的默认对齐方式导致的，所以父元素字体大小为0时，就不会有这个问题了。
但设置前要确定父盒子里不会有文字哦，不然文字就无法显示了。

给img的父盒子加 { font-size：0 }

4.设置父元素行高为0
同上
给img的父盒子加 { line-height: 0 }

5.调整img的margin-bottom
根据自己的需要调整图片的外边距，为负值时就可以隐藏白边，但不推荐，容易影响后面的元素。

img {
    margin-bottom: -4px;
}