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>
Best Answer
By default, an image is rendered inline, like a letter so 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 g, j, p and q.
You can:
vertical-align
of the image to position it elsewhere (e.g. themiddle
) ordisplay
so it isn't inline.The included image is public domain and sourced from Wikimedia Commons