The image inside the div has extra space below the image
P粉523335026
2023-08-29 12:46:39
<p>Why is the height of <code>div</code> in the following code greater than the height of <code>img</code>? There is a gap below the image, but it doesn't seem to be padding/margin. </p>
<p><strong>What is the gap or extra space below the image? </strong></p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Another option suggested in this Blog post is styling the image to
style="display: block;"By default, the image is rendered inline, just like the letters, so it's on the same line as a, b, c, and d.
There is a space below this line for the letters g, j, p and q.
you can:
vertical-alignof the image Place it somewhere else (e.g.middle) ordisplayso that it is no longer inline.div { border: solid black 1px; margin-bottom: 10px; } #align-middle img { vertical-align: middle; } #align-base img { vertical-align: bottom; } #display img { display: block; }