图像里面的div在图像下面有额外的空间 [英] Image inside div has extra space below the image

问题描述

为什么在将其放置在其他位置。

Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.

What is the gap or extra space below image?

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

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

解决方案

By default, an image is rendered inline, like a letter.

It sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like f, j, p and q.

You can adjust the vertical-align of the image to position it elsewhere.

这篇关于图像里面的div在图像下面有额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！