div 內的圖像在圖像下方有額外的空間

Question

為什麼下面的程式碼中div的高度大於img的高度？影像下方有一個間隙，但它似乎不是填充/邊距。影像下方的間隙或額外空間是多少？ #wrapper{border:1pxsolidred;width:200px;}img{width:200px;}

P粉909476457 · Answer

此中建議的另一個選項部落格文章正在將圖像的樣式設定為style="display: block;"

#

P粉222320176 · Answer

預設情況下，圖像以內聯方式呈現，就像字母一樣，因此它與 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;
}


Default
  The quick brown fox jumps over the lazy dog 



vertical-align: middle
  The quick brown fox jumps over the lazy dog  
  
  
vertical-align: bottom
  The quick brown fox jumps over the lazy dog  


display: block
  The quick brown fox jumps over the lazy dog