CSS中img图片下方出现空白边距的解决办法

...

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