兩張圖片之間的間隙——display中的inline屬性

現象

相信不少人都遇到過兩張img中間那條可惡的間隙吧,

直接上例子：

HTML：

<div>
    <img src="images/img (1).jpg" alt="">
    <img src="images/img (2).jpg" alt="">
    <img src="images/img (3).jpg" alt="">
</div>

 CSS：

    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #000;
    }
    img{
        width:350px;
    }

顯示結果： 

 

解決

造成這個間隙存在的直接原因是：代碼中<img>標籤之間存在換行。我們知道HTML中，特殊情況除外，元素之間無論多少個空格和換行都會被執行成爲一個空格。

解決方式頁比較簡單，將<img>標籤寫在一行，如：

<div>
    <img src="images/img (1).jpg" alt=""><img src="images/img (2).jpg" alt=""><img src="images/img (3).jpg" alt="">
</div>

結果：

 

當然，更多時候，特別是在實際開發應用中，我們可以不必理會這個間隙，也不用將連續的<img>標籤寫在一行內。這是因爲，正式的開發項目都會有一個代碼壓縮的過程，這個過程會將我們的代碼中多餘的所有空格及換行完全去除，也就直接解決了這個問題。

 

原因

造成這一現象的根本原因是什麼呢？是inline。

img標籤的display屬性的屬性值爲：inline-block，即常說的行級塊元素（或者內聯塊元素等）。

我們試着將img的display屬性改爲inline：

    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #000;
    }
    img{
        width:350px;
        display: inline;
    }

 img標籤仍然換行編寫：

    <div>
        <img src="images/img (1).jpg" alt="">
        <img src="images/img (2).jpg" alt="">
        <img src="images/img (3).jpg" alt="">
    </div>

此時結果顯示圖片之間依舊有空隙：

img標籤寫在同一行： 

    <div>
        <img src="images/img (1).jpg" alt=""><img src="images/img (2).jpg" alt=""><img src="images/img (3).jpg" alt="">
    </div>

此時則沒有了間隙：

 

這是由於：display屬性的值中，帶有inline的元素，都會具有inline的一個基本特性——文字特性。也就是說，display的值爲inline或者inline-block的元素，都帶有文字的部分特性。在這裏即表現爲：將每個img當成了一個漢字或者一個英文單詞。

    <div>
        <img src="images/img (1).jpg" alt="">
        <img src="images/img (2).jpg" alt="">
        <img src="images/img (3).jpg" alt="">
        我
        是
        字
    </div>

 可見，img之間和文字之間的間隙都是一樣的：

結語

連續的img之間出現空隙，其實是由img標籤的display：inline-block引起，但它其實算不上一個bug，一般也不必理會它。

只是在日常開發過程中，需要注意其在本地調試時產生的影響。避免使用負margin等錯誤方式來調整，而最終導致上傳服務器後出錯的情況。