div内的图像在图像下方有额外的空间

Question

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Answer 1

默认情况下,图像以内嵌方式呈现,就像字母一样.

它位于a,b,c和d所在的同一条线上.

在f,j,p和q等字母上找到的下降线下方有一个空格.

您可以调整vertical-align图像以将其放置在其他位置(例如middle)或更改它display以使其不是内联的.

Answer 2

此处建议的另一个选项是将图像的样式设置为style="display: block;"

Answer 3

快速解决:

要消除图像下的间隙,您可以:

• 将图像的vertical-align属性设置为vertical-align: bottom; vertical-align: top;或vertical-align: middle;
• 将图像的显示属性设置为 display:block;

请参阅以下代码以获取实时演示:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

说明:为什么图像下面有空隙？

图像下的间隙或额外空间不是错误或问题,它是默认行为.根本原因是图像是替换元素(参见MDN和W3C).这允许它们"像图像一样"并具有自己的内在尺寸,宽高比....
浏览器计算它们的显示属性inline但是它们给它们一个特殊的行为,使它们更接近inline-block元素(因为你可以垂直对齐它们,给它们的高度,顶部/底部边距和填充,转换......).

这也意味着:

[...]当图像用于具有vertical-align:baseline的内联格式化上下文时,图像的底部将在容器的基线上显示.(来源:MDN,强调我的)

由于浏览器默认将vertical-align属性计算为基线,因此这是默认行为.下图显示了基线在文本上的位置:

基线对齐的元素需要为延伸到基线以下的下降器保留空间(如j, p, g ...),如上图所示.在此配置中,图像的底部在基线上对齐,如此示例中所示:

div{border:1px solid red;}
img{width:100px;height:auto;}

<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

这就是为什么<img>标签的默认行为在它的容器底部创建一个间隙以及为什么更改vertical-align属性或display属性会将其删除,如下面的演示:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}

<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Answer 4

也可以使父母的行高无效:

#wrapper {
  line-height: 0;
}

所有修复:http://jsfiddle.net/FaPFv/

Answer 5

您所要做的就是分配此属性:

img {
    display: block;
}

默认情况下,图像具有以下属性:

img {
    display: inline;
}

Answer 6

你可以使用几种方法解决这个问题

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

Answer 7

我用过line-height:0，对我来说很好用。