图片三像素间隙处理办法

时间:2022-07-29 20:28:59

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

图片三像素间隙处理办法

 

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; } 

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