CSS图片底部默认边距三种解决办法

产生底部边距的原因

由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离
引申：img是行内元素为何能设置框高？
img元素虽然是行内元素同时也是置换元素（定义：展示内容由其属性决定，同理还有input、select、textarea），置换元素内置框高。

1、给img添加一个垂直方向对齐方式，属性任意

2、把图片设置为块级元素

3、设置父元素的文字大小为0

这种方法会把父级下所有子元素文字大小改变，注意使用

4、给父元素添加overflow属性

5、设置图片的浮动或者定位属性

给图片设置浮动（float）或者定位（position）属性也能够解决地不留白问题，原理和方法一类似，就是通过添加 float 或 position 属性来改变display属性，被隐式变为块级元素了。

注：使用浮动的话最后要清除浮动