前言
在写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;?
注意：这种方法会改变父元素下所有子元素的文字大小
下面是修改后的效果
?想必这才是我们想要的效果。