Imej di dalam div mempunyai ruang tambahan di bawah imej
P粉523335026
2023-08-29 12:46:39
<p>Mengapakah ketinggian <code>div</code> dalam kod berikut lebih tinggi daripada ketinggian <code>img</code>? Terdapat jurang di bawah imej, tetapi ia tidak kelihatan seperti padding/margin. </p>
<p><strong>Apakah jurang atau ruang tambahan di bawah imej? </strong></p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#wrapper {
sempadan: 1px merah pepejal;
lebar: 200px;
}
img {
lebar: 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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
此中建议的另一个选项博客文章正在将图像的样式设置为
style="display: block;"默认情况下，图像以内联方式呈现，就像字母一样，因此它与 a、b、c 和 d 位于同一行。
该行下方有一个空格，用于存放在字母 g、j、 p 和 q。
你可以：
vertical-align图像的 将其放置在其他位置（例如中间）或显示，使其不再内联。div { border: solid black 1px; margin-bottom: 10px; } #align-middle img { vertical-align: middle; } #align-base img { vertical-align: bottom; } #display img { display: block; }