多个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>

效果：

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

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

效果：

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

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

效果：

4. 在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>

效果：

5. 使用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>

效果：

6. 使用减少空白字符的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>

效果：

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