CODEWITHSUNDEEP
htmlcss
kptlronyttcna
kptlronyttcna

Reputation: 1501

Unwanted space between img and figcaption inside figure

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

Upvotes: 12

Views: 8786

Answers (4)

Erick Sousa
Erick Sousa

Reputation: 69

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>

Upvotes: 6

rajesh
rajesh

Reputation: 1485

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

Upvotes: 4

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

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>

Upvotes: 21

Bala
Bala

Reputation: 706

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.

Upvotes: 3

Related Questions