Unwanted space between img and figcaption inside figure

2018-07-02 00:50:34

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.)

由于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>

The space is there due to Line-Height of the font present in figcaption element. Set the line-height of the figcaption the same as its font-size. Or lesser.

something like

figcaption {
    line-height:4px;
}

jsFiddle Link

Link explaining how Line-Height works http://joshnh.com/2012/10/12/how-does-line-height-actually-work/

Hope this helps.

链接地址: http://www.djcxy.com/p/89306.html

上一篇: 元素之间的空间

下一篇: 图中img和figcaption之间的不需要的空间