Question

为什么图里面的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);
}

（我不会问如何删除这个空间，我会问为什么会这样。）

Answer 1

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

来修复它

＆＃13;

img {
  width: 200px;
  vertical-align: middle;
}
figcaption {
  background-color: hsla(0, 0%, 0%, .5);
}

＆＃13;

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

＆＃13;

Answer 2

您只需在 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>

Answer 3

由于figcaption元素中存在的字体的Line-Height，空间在那里。将figcaption的line-height设置为与font-size相同。或者更小。

类似

figcaption {
    line-height:4px;
}

jsFiddle Link

解释Line-Height如何工作的链接http://joshnh.com/2012/10/12/how-does-line-height-actually-work/

希望这有帮助。

Answer 4

在HTML中，图像实际上就像单词一样。

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

img {
   width: 200px;
    display:block;
}

FIDDLE

图中的img和figcaption之间不需要的空间

4 个答案: