lonzisng
新手
新手
  • 最后登录2020-01-16
  • 发帖数3
  • 社区居民
阅读:5565回复:0

图片并列产生缝隙的根本原因-inline,inline-block

楼主#
更多 发布于:2019-02-17 20:57
现象
相信不少人都遇到过两张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等错误方式来调整,而最终导致上传服务器后出错的情况。
---------------------
作者:傀人
来源:CSDN
原文:https://blog.csdn.net/weixin_44136516/article/details/87553357
版权声明:本文为博主原创文章,转载请附上博文链接!
游客


返回顶部

公众号

公众号