两张图片之间的间隙——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等错误方式来调整，而最终导致上传服务器后出错的情况。