css之图片并列间隙问题

在各个网站上我们很容易看到有多张图片并列呈现如下：

根据习惯写出了以下html和css代码

     <img src="1.jpg" >
	 <img src="1.jpg" >
	 <img src="1.jpg" >
	 <img src="1.jpg" >

img{
	width: 100px;
	height: 100px;
}

得到了以下结果：

我们可以很清晰的看到图片中间有空白的间隙（边距4px），产生这种问题的原因是由css三大元素中行块级元素的特性决定的。img属于行块级元素，凡是带有inline的元素，都带有文字特性，被分割 。（详情请见https://mp.csdn.net/postedit/81517983）

我们采用去空格来解决这个问题

<img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" ><img src="1.jpg" >

效果：

ps：也可以将margin-left设置为负的，但是这种方法会在后期压缩打包时会出现问题，不建议用。