解决由img引发的bug(公司中开发很容易遇到)

凡是带有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;

}

执行结果:

注意:哪个元素设置为浮动元素,对该标签前面的元素不产生影响,对后面的元素产生影响