img标签之间的间距问题原理

问题描述：

<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">

众所周知，多个

img

并列显示时会有几像素间距，但是这并不是

img

标签特有的特性。

<style>

div{
display: inline-block;
width: 200px;
height: 200px;
background: #f40;
}

</style>

<div></div>
<div></div>
<div></div>

将div设置为inline-block属性之后，div标签之间也会存在间距

内部原理：

实际上，所有

display

属性为

inline

，

inline-block

的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。

常用解决方法：

1. 删除标签之间的空格：

<img src="img/test.jpg" alt=""><img src="img/test.jpg" alt=""><img src="img/test.jpg" alt="">

2. 将父级设置为font-size: 0px：

<div style="font-size: 0px">

<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">

</div>

3. 将父级设置为使用负margin去除边距

<style>

img {
margin-left: -8px;
}

</style>

<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">

4. 设置浮动

<style>

img {
float: left;
}

</style>

<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">
<img src="img/test.jpg" alt="">