因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。
解决方案：一：vertical-align: bottom（推荐）
解决方案：二：display：block；（不推荐）
不推荐原因：因为img在浏览器里的默认样式是inline,除非有特别的需要否则还是不改变盒模型为好，在这个问题中本质还是行内元素的纵向对齐问题，可以给img调整vertical-align来解决，本题中用bottom就行了
扩展：什么是基线？
基线就是我们小时候用的英语本中，中间的第三条线就是基线；
第一条线是：上升高度（帽高度）
第二条线是：中值高度
第四条线是：下降高度
解读：ascent 上升 mean line 平均线 descent 下降
html img 图片上方产生1像素px间隙解决
方案一：通过css对图片加一个浮动元素，比如.divcss5 img{ float：left}
方案二：将图片高度处理为单数（1、3、5、7单数），比如图片本身为200px高度，为了解决我们将图片PS处理成201px或199px高度。图片本身高度为202px双数在IE6和IE7浏览器中就会在图片上方产生多1px的空白距离。所以制作图片切图时候，让图片高度为单数（奇数）即可解决。
下载本文