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