阅读:5565回复:0
图片并列产生缝隙的根本原因-inline,inline-block
现象
相信不少人都遇到过两张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 版权声明:本文为博主原创文章,转载请附上博文链接! |
|