关于html：img和figcaption之间的多余空间


Unwanted space between img and figcaption inside figure

为什么图形中的img和figcaption之间存在空白？
img和figcaption的边距和填充均为0。

的HTML

1
2
3
4
<figure>
  <img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
  <figcaption>Hello</figcaption>
</figure>

的CSS

1
2
3
4
5
6
img {
   width: 200px;
}
figcaption {
  background-color: hsla(0, 0%, 0%, .5);
}

(我不是在问如何删除这个空间，我是在问为什么它在那里。)

相关讨论

由于image是inline element，它在底部提供了额外的空间，您可以通过提供vertical-align来修复它

1
2
3
4
5
6
7
img {
  width: 200px;
  vertical-align: middle;
}
figcaption {
  background-color: hsla(0, 0%, 0%, .5);
}
1
2
3
4
<figure>
  <img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
  <figcaption>Hello</figcaption>
</figure>

相关讨论

您只需要在img标签中添加一个display：块即可。

1
2
3
4
5
img {
   width: 200px;
   background-color: hsla(0, 0%, 0%, .5);
   display: block;
}
1
2
3
4
<figure>
  <img src="https://www.google.com/images/srpr/logo11w.png" />
  <figcaption>Hello</figcaption>
</figure>

由于figcaption元素中存在字体的Line-Height，因此存在空格。 将figcaption的行高设置为其字体大小。 或更小。

就像是

1
2
3
figcaption {
    line-height:4px;
}

jsFiddle链接

链接，说明Line-Height的工作原理http://joshnh.com/2012/10/12/how-does-line-height-actually-work/

希望这可以帮助。

在HTML中，图像将有效地像单词一样。

您可以使用CSS。 在图像上设置display：block或float：left将使您可以定义自己的间距并按需要设置HTML格式，但会以可能适合或不合适的方式影响布局。
添加此CSS：

1
2
3
4
img {
   width: 200px;
    display:block;
}

小提琴