问题:
众所周知,多个img
并列显示时会有几像素间距,但是这并不是img
标签特有的特性。
将div设置为inline-block属性之后,div标签之间也会存在间距
内部原理:
实际上,所有
display
属性为inline
,inline-block
的盒模型都会有文字特性,间距就是由于两个标签之间的空白引起的。
常用解决方法:
1. 删除标签之间的空格:
<img src="img/test.jpg" alt=""><img src="img/test.jpg" alt=""><img src="img/test.jpg" alt="">
2. 将父级设置为font-size: 0px:
<div style="font-size: 0px"> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> </div>
3. 设置为使用负margin去除边距
<style> img { margin-left: -8px; } </style> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt="">
4. 设置浮动
<style> img { float: left; } </style> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt=""> <img src="img/test.jpg" alt="">
原文链接:https://blog.csdn.net/ppSilence/article/details/78931290