现在就来说说，这个问题，

先来写个img标签和div

 <img src="1tplv3TZP.jpg" />
<img src="1WAsk3WWCAY.jpg" />
    <div></div>

然后在给个样式

  img{
            height:200px;
            width:300px;
           
            }
        .div{
            background:#ff6a00;
            height:200px;
            width:300px;
        }

先来看看效果

是不是可以很明显的看到img下面有个距离，

再来说说图片到底是块级还是内联

如果说他是块级，那她为什么图片可以干行内的事，可以并排呢？
如果说他是行内，那她为什么又可以设置宽高呢，大家都知道，行内元素是不能设置宽高的，
所以这个img是确实是个行内元素，但是他是个特殊的行内元素，可以说他是个可以设置宽高的行内元素吧，他叫替换行内元素。

那再来说说，怎么解决这个问题，

第一，首先肯定会给img设置margin和padding都为0，

 img{
            height:200px;
            width:300px;
            margin:0;
           padding:0;
            }

但是呢，是不是没什么卵用。

肯定一般也都会想到使用margin负值消除

这里就不做演示了 ，

下面，就来说说最好的解决办法

那就是把img设置为小快快

 img{
            height:200px;
            width:300px;
           display:block;
            }

然后再来看看，

是不是没有了

end

另外那两张演示图片附上 😀