你是否遇到这个问题,例如我现在要让上下两张图片依次排列,会看到以下效果,这很难看不是我要的:
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; }
哈哈,简单总结下,以后再遇到的时候可以轻松解决噢!