图中img和figcaption之间的不需要的空间 [英] Unwanted space between img and figcaption inside figure

问题描述

为什么图像中的img和figcaption之间有空白区域？
保证金和img和figcaption的填充都是0。

HTML

 <图> 
< 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 它在底部提供了额外的空间，您可以通过给 vertical-align

$来修复它b $ b

  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/> < / fig>< / figure>  Why there's white space between an img and figcaption inside figure?
margin and padding of both img and figcaption are 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);
}
(I'm not asking how to remove this space, I'm asking why it's there.)
解决方案
As image is a inline element it gives extra space at the bottom you can fix it by giving 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和figcaption之间的不需要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！