刚才一次性插入多张图片,本来以为会在一行显示,一节挨着一个,写完才发现是这样的。
多出来的间距是怎么回事???
想使用:margin:0,padding:0处理,结果没用。
经过我机智的探索,发现如下解决方法:
第1种:在img标签的父级上写:font-size:0;
//这个在解决display:inline-block出现的问题也有帮助
.imgBox{
width: $content-width;
margin: $block-center;
font-size: 0;
.bgImg{
margin: 0;
}
}
/*我用了一点sass变量。*/
第2种:多个img标签写在一行:
<img src="/i/eg_tulip.jpg" height="100px"/>
<img src="/i/eg_tulip.jpg" height="100px"/>
改为
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
3.使用display:block(img是内联元素)
还要要float一下才行
<img src="/i/eg_tulip.jpg" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg" height="100px" style="display:block"/>
4.使用letter-spacing属性
<div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠-->
<img src="/i/eg_tulip.jpg" height="100px"/>
<img src="/i/eg_tulip.jpg" height="100px"/>
</div>
网友评论