图片三像素间隙处理办法

 你是否遇到这个问题，例如我现在要让上下两张图片依次排列，会看到以下效果，这很难看不是我要的：

 

img作默认的display是inline-block， 匿名块框把行内元素包裹起来，会撑出一定空隙。今天在项目中碰到了这个问题，所以就来再次总结一下解决办法。

假设html结构是：

<div class="box">

<img src="你的图片路径"  alt=""/>

...

</div>

 

 

1.更改父元素文字大小：

.box{font-size: 0;}

 

2.把图片改为块级元素：

img{display:block;}

 

3.给图片加浮动（这个用于img和其他元素并列时解决下边不能对齐的问题，像我这样要图片独占一行的不适用哦！）

img{floaat:left; }

 

4.给图片加一个对齐方式：（ 只要不是baseline都可以）

img{vertical-align:middle; } 

哈哈，简单总结下，以后再遇到的时候可以轻松解决噢！