div 內的圖像在圖像下方有額外的空間
P粉523335026
2023-08-29 12:46:39
<p>為什麼下面的程式碼中 <code>div</code> 的高度大於 <code>img</code> 的高度？影像下方有一個間隙，但它似乎不是填充/邊距。 </p>
<p><strong>影像下方的間隙或額外空間是多少？ </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>
此中建議的另一個選項部落格文章正在將圖像的樣式設定為
#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; }