CSS图片底部默认边距原因及解决方法

前言

在写jQuery案例的时候发现图片底部有默认的边距，这显然不是我们想要的效果

 原因

       由于img元素默认为inline元素，而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离

       引申：img是行内元素为何能设置宽高？

       img确实是行内元素 但它也是置换元素 。

置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；

又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

所以 img  input  select  textarea  button  label 等，他们被称为可置换元素（Replaced element）。

他们区别一般inline元素是：这些元素拥有内在尺寸 内置宽高 他们可以设置width/height属性。他们的性质同设置了display:inline-block

的元素一致。

解决方法 

1.给图片设置display: block;

2.给图片添加一个垂直方向对齐方式，属性任意，如vertical-align: bottom;

3.修改父元素的line-height 

4.给父元素设置font-size:0; 

注意：这种方法会改变父元素下所有子元素的文字大小

下面是修改后的效果

 想必这才是我们想要的效果。