<figure> taking extra 4px in content height [duplicate]

Question

This question already has answers here:

White space at bottom of anchor tag (5 answers)

Closed 9 years ago.

I'm trying to add an image inside the figure tag, but its leaving a small 4px space under the image, which becomes very obvious on adding a border to figure. I could not set width to figure tag, since the width of the image is unknown while the html is rendered.

http://codepen.io/shahalpk/pen/cltAn

Answer 1

Make your image display block, like so:

figure img {

display: block;

}

Example using your code:

http://codepen.io/anon/pen/dazFt