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 (eg the middle ) or change the display so it isn't inline.

---

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

---

Quick fix:

To remove the gap under the image , you can:

Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;

Set the display property of the image to display:block;

See the following code for a live demo:

#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>

链接地址: http://www.djcxy.com/p/29488.html

上一篇: 堆栈溢出

下一篇: div内的图像在图像下面有额外的空间