＜img＞清除默认间距

在DIV里放4张图片<img>，可以看到<img>图片上下左右会有默认间隙

<div style="width:100%; height:2000px;background-color:blue">
<img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
</div>

可以看到，<img>默认有空白间隙，红色框框标记部分。

如何清除？

1、在<img>父容器DIV里设置font-size: 0px。此方法不适合DIV及子元素里有文本的情况，否则需要在文本单独设置font-size。

2、将<img>元素设置为块元素，display: block。

3、设置<img>元素的vertical-align: top和vertical-align: bottom属性，可以解决上下边距问题。

4、将<img>元素的父容器DIV设置line-height: 0，可以解决上下默认边距问题。

5、将<img>元素设置float: left;，可以解决左右边距问题。

6、<img>元素不换行，不推荐，代码阅读不方便。

<div style="width:100%; height:2000px;background-color:blue">
<img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px"><img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
  <img src="./images/banner1.jpg" style="width:200px;height:200px">
</div>