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

Question

Why there's white space between an img and figcaption inside figure? margin and padding of both img and figcaption are 0.

 img { width: 200px; } 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>

(I'm not asking how to remove this space, I'm asking why it's there.)

Answer 1

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>

Answer 2

All you need is add a display: block in img tag.

 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

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.

Answer 4

In HTML the images will effectively act like words.

You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate. Add this CSS:

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

FIDDLE