多个img标签之间有几px间隙的解决方法

img标签之间的空隙解决办法

原因：是因为inline-block所导致的，下篇文章详细讲述下
在多个img标签一样排列的时候中间会有一些间隙 如下所示：

解决办法：

1. 多个img标签写在同一行上

<div id="app">
    <img src="./1.jpg" alt=""><img src="./2.jpg" alt=""><img src="./3.jpg" alt=""><img src="./4.jpg" alt="">
    </div>

效果：

1. 闭合标签与开始标签写在一起
   

<div id="app">
    <img src="./1.jpg" alt=""
    ><img src="./2.jpg" alt=""
    ><img src="./3.jpg" alt=""
    ><img src="./4.jpg" alt="">
    </div>

效果：

1. 使用注释连接标签的结束标签与开始标签
   

<div id="app">
        <img src="./1.jpg" alt=""><!--
        --><img src="./2.jpg" alt=""><!--
        --><img src="./3.jpg" alt=""><!--
        --><img src="./4.jpg" alt="">
    </div>

效果：

1. 在img的的父级标签上写上font-size:0;

<div id="app" style="font-size: 0">
  <img src="./1.jpg" alt="" />
  <img src="./2.jpg" alt="" />
  <img src="./3.jpg" alt="" />
  <img src="./4.jpg" alt="" />
</div>

效果：

1. 使用display转化为块级元素
   

<style type="text/css">
    img{
    display: block;
    float: left;
 }
 <div id="app">
  <img src="./1.jpg" alt="" />
  <img src="./2.jpg" alt="" />
  <img src="./3.jpg" alt="" />
  <img src="./4.jpg" alt="" />
</div>
</style>

效果：

1. 使用减少空白字符的letter-spacing属性
   

<div id="app" style="letter-spacing:-100px;">
  <img src="./1.jpg" alt="" />
  <img src="./2.jpg" alt="" />
  <img src="./3.jpg" alt="" />
  <img src="./4.jpg" alt="" />
</div>

效果：

以上就是几种可以解决问题的方法了

多个img标签之间有几px间隙的解决方法

原文：https://www.cnblogs.com/my466879168/p/12458778.html