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

相信网站前端开发者可能会遇到这样的问题，

这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？本文向大家介绍如何解决div里面img图片下方有空白的问题。

首先看代码：

#wrapper {

border: 1px solid red;

width:200px;

}

img {

width:200px;

}

运行结果为：

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

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

#wrapper {

border: 1px solid red;

width:200px;

}

img {

width:200px;

display:block;

}

其他解决方法：

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; }