图中img和figcaption之间的不需要的空间
为什么img和figcaption之间有空白区域？ img和figcaption的边距和填充都是0。
HTML
<figure>
<img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
<figcaption>Hello</figcaption>
</figure>
CSS
img {
width: 200px;
}
figcaption {
background-color: hsla(0, 0%, 0%, .5);
}
（我不问如何去除这个空间，我问为什么它在那里。）
由于image是inline element因此可以在底部inline element出额外的空间，您可以通过vertical-align来修复它
img {
width: 200px;
vertical-align: middle;
}
figcaption {
background-color: hsla(0, 0%, 0%, .5);
}<figure>
<img src="https://www.gravatar.com/avatar/61af86922698a8cd422f77ae2343d2a5?s=48&d=identicon&r=PG&f=1" />
<figcaption>Hello</figcaption>
</figure>所有你需要的是在img标签中添加一个display：block 。
img {
width: 200px;
background-color: hsla(0, 0%, 0%, .5);
display: block;
}<figure>
<img src="https://www.google.com/images/srpr/logo11w.png" />
<figcaption>Hello</figcaption>
</figure>由于figcaption元素中存在字体的线高度，空间在那里。 将figcaption的行高设置为与其字体大小相同。 或更少。
就像是
figcaption {
line-height:4px;
}
jsFiddle链接
解释Line-Height如何运作的链接http://joshnh.com/2012/10/12/how-does-line-height-actually-work/
希望这可以帮助。
链接地址: http://www.djcxy.com/p/89305.html上一篇: Unwanted space between img and figcaption inside figure