Last Updated: February 25, 2016
·
3.108K
· brennaob

Remove extra space below images

img {  
    display:block;  /* removes extra space */
}

This is no secret, but it stumped me for a long time when I was first getting started with CSS, and I see it catch beginners all the time.

When styling an image with an element right below it, you often get an extra space hanging out in between the element and the picture.

Picture

No amount of zeroing margins and padding will remove it. But adding display:block; to your image will! Images are inline-block by default, so that extra space is actually the browser leaving room for text descenders.

With the fix applied:

Picture

See it in action in this fiddle: http://jsfiddle.net/BxTzK/

5 Responses
Add your response

doing
margin-top: -5px;
on the .caption class also fixes the problem, but it was originated because of combining an inline and a block element in the same scope

over 1 year ago ·

Yes, that would work, but negative margins used like that are a bit of a hack. What if the space isn't always 5px across browsers or when font-size changes? Better to have a surefire fix!

over 1 year ago ·

I agree that is not the best solution but negative margins are not a hack check this article http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

over 1 year ago ·

@arosemena, you're right about to combine inline and block sibling elements, but I don't believe that a negative margin top using pixels is a solution because the space will reappear if the user increase the font size of the browser.

over 1 year ago ·

Vertical-align: bottom; on the image should also do the trick, in case you need to keep the image inline for some reason.

over 1 year ago ·