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

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

楼主#
更多 发布于:2019-02-17 20:56
现象
相信不少人都遇到过两张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等错误方式来调整,而最终导致上传服务器后出错的情况。
游客


返回顶部

公众号

公众号