img图片放在div里, div下面有多余的空白

相信网站前端开发者可能会遇到这样的问题，<div><img src="picture.png"/></div>这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？本文向大家介绍如何解决div里面img图片下方有空白的问题。

首先看代码：

<style>
#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
</style>
<div id=\"wrapper\">
  <img src=\"http://i.imgur.com/RECDV24.jpg\" />
</div>

运行结果为：

上面代码中，div下面有一小段空白间隙，图像之下的间隙或多余的空间是什么？下面我们来分析一下。

首先，默认情况下，图片是内联元素，即display:inline. 问题的根本原因就在这里。 所以我们只需样将图片的display改为block即可。

<style>
#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
  display:block;
}
</style>
<div id=\"wrapper\">
  <img src=\"http://i.imgur.com/RECDV24.jpg\" />
</div>

在线运行

其他解决方法：

1. 运用 line-height

#wrapper {  line-height: 0px;  }

2. 运用 display: flex

#wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

3. 使用display: block，table，flex和inherit

#wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }