CSS中img图片下方出现空白边距的解决办法
偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中，这个空白还不是固定值，通常3-6个像素中间。通过对样式表中所有父级元素的检查，并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。
原因：
图片行内垂直对齐的是基线，基线的位置与字体行距有关。
办法：
1、将img变为块状元素即display:block;
2、将img垂直对齐方式定义为top或bot
摘要
偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中，这个空白还不是固定值，通常3-6个像素中间。通过对样式表中所有父级元素的检查，并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。
原因：
图片行内垂直对齐的是基线，基线的位置与字体行距有关。
办法：
1、将img变为块状元素即display:block;
2、将img垂直对齐方式定义为top或bottom即vertical-align:top;、vertical-align:bottom;
3、将img父级元素文字大小定义为0即font-size:0;
