CSS-消除图片默认间距
通常我们会遇到这样的问题:
图片与图片以及文字之间会遇到中间存在默认间距:
html:
<div class="Img">
<img src="bg1.jpg" alt/>
<img src="bg.2jpg" alt/>
</div>
解决方案:
有以下三种,建议只采用前两种
方案一:
将img显示设置成display:block;
因图片横向排列,同时设置向左浮动float:left;
代码如下:
css:
.Img{
img{
width: 100%;
display: block;
float: left;
}
}
方案二:
在图片的父容器上设置字体大小为0;font-size:0;
代码如下:
css:
.Img{
font-size: 0;
img{
width: 100%;
}
}
方案三:
在图片后紧跟图片或文字,不换行;文字仅对span标签有用,
代码如下:
html
<div class="Img">
<img src="bg1.jpg" alt/><img src="bg2.jpg" alt/><span>随便点</span>
</div>