凡是带有inline属性的元素都具有文字特性,即行级元素和行级块元素具有此特性,其中img就因为这个特点产生了个小bug这个小bug是当img标签之间有空格时(无论多少个空格),展示在浏览器中图片与图片之间会有空隙,下面是例子
html代码:
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
css代码:
div{
width:300px;
height:300px;
border:1px solid black;
}
//给div设置宽高和外边框,来测试图片占的位置
img{
width:100px;
}
//给图片设置宽(在css中只要给图片设置了宽高其中一种属性,那么图片会等比例缩放)为100px
执行结果:
在上交到服务器的时候,系统会压缩文件,压缩文件的方法:
A: 系统会将img标签换成一个字母,这样来缩小文件的空间
B: 去掉回车,空格(系统自动去)
这里有三个解决办法
第一个: 去空格(解决不完全)
在代码编译器中就将img标签之间的空格去掉,
html代码:
<div>
<img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" >
</div>
css代码:
div{
width:300px;
height:300px;
border:1px solid black;
}
img{
width:100px;
}
执行结果:
虽然图片与图片之间的空隙没有了,但是图片上下还是会有空隙,这个方法只能处理容器中单排图片有空隙的问题
第二种: 将img的文字特性去掉
html代码:
<div>
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
</div>
css代码:
div{
width:300px;
height:300px;
border:1px solid black;
font-size:0;//这一行是解决办法
}
img{
width:100px;
执行结果:
第三种: 将img变为块级元素,再通过浮动解决
html代码:
<div>
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
<img src="1.jpg" >
</div>
css代码:
div{
width:300px;
height:300px;
border:1px solid black;
}
img{
width:100px;
float:left;
}
执行结果:
注意:哪个元素设置为浮动元素,对该标签前面的元素不产生影响,对后面的元素产生影响