问题描述:
在HTML里图片之间产生的间距，浏览器都会有默认的间距。话不多说，直接上图解释其中的问题。
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 100px;
border: 1px solid pink;
margin: 50px auto;
}
img{
width: 100px;
height: 100px;
}
</style>
<body>
<div>
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
</div>
</body>
如图：产生默认边距问题导致出现换行等问题
解决办法：分为三种模块来解决
1.上下间距问题
2.左右间距问题
3.四周间距问题
1. 上下问题:
① 对img 加上 vertical-align：top 或者vertical-align：bottom属性，但此属性只能解决图片产生的上下默认边距问题。如图：
img{
width: 100px;
height: 100px;
vertical-align: top;
}
② 对父元素 div加上line-height：0 ；属性，但此属性只能解决图片产生的上下默认边距问题。如图：
div{
width: 400px;
height: 100px;
border: 1px solid pink;
margin: 50px auto;
line-height: 0;
}
2. 左右问题:
① 最直接的办法，产生左右的默认间距问题是由于代码换行问题识别而产生，可以在img代码后加上注释进行连接。如图：
<div>
<img src="img/1.jpg"/><!--
--><img src="img/2.jpg"/><!--
--><img src="img/3.jpg"/><!--
--><img src="img/4.jpg"/><!--
--><img src="img/4.jpg"/>
</div>
② 代码不换行（不建议使用！）如图：
<img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/><img src="img/4.jpg"/>
③ float来解决，或者将img ，display：block； 但此时则会出现img换行问题又得继续进行float操作！（如div没设置高度，同时还会此时高度塌陷的问题！）
img{
width: 100px;
height: 100px;
float: left;
}
3. 四周问题:
① 在父元素上加上 font-size ： 0；能同时解决四周所产生的边距问题！（但在父元素下同时存在文本的情况下，这需要单独对文本进行 font-size 声明大小！）
div{
width: 400px;
height: 100px;
border: 1px solid pink;
margin: 50px auto;
font-size: 0;
}
② 用float来解决
img{
width: 100px;
height: 100px;
float: left;
}
③ 当然上下+左右方法也能解决。
大致想到了这几种种方法就这样！如果有其他的方法，请不吝赐教，谢谢！
