問題描述：

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