图像在 div 中下方有额外的空间。

38 浏览
0 Comments

图像在 div 中下方有额外的空间。

为什么在以下代码中，div的高度比img的高度要大？图像下方有一个间隙，但似乎不是填充/边距。

图像下方的间隙或额外空间是什么？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

\"Image

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

在这篇博客文章中提到的另一种选择是将图像的样式设置为style=\"display: block;\"。

0
0 Comments

默认情况下，图片以内联方式呈现，就像一封信一样，因此它与字母a、b、c和d在同一行上。

在该行下方留有空间，用于像g、j、p和q这样的字母上的下降符号。

下降符号演示

你可以：

  • 调整图像的vertical-align以将其定位在其他位置（例如，middle），或者
  • 更改display以使其不是内联的。
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

所包含的图片属于公共领域，并从维基共享资源获取。

0