img标签间间距问题原理以及解决办法

问题：

众所周知，多个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