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="">