div中放入一个img元素导致div高度会多出3px问题

我的结构如下图，

<div class="main-box">
   <div class="container">
      <img src="./images/icon-content.jpg" alt="">
   </div>

css部分为：

.main-box
,.container
,.main-box img{
  width: 100%;
  height: 100%
}
.main-box{
  position: relative;
}
.main-box img{
  width:100%;
}

预想中应该是div的铺面全屏，img的大小和div一样占满整个屏幕，但结果恰恰是div和img下方有一个黑条大概（3px）导致页面可以上下滑动一点点。如下图：

当然我第一反应可是想padding或margin、border引起的，一顿设置，然而并未卵用。

原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。

解决办法：解决这个问题的方法也很简单，把img标签的display属性设置为block。

.main-box img{
   width:100%;
   display: block;
}

问题解决