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.
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:
See it in action in this fiddle: http://jsfiddle.net/BxTzK/
Written by Brenna O'Brien
Related protips
5 Responses
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
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!
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/
@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.
Vertical-align: bottom; on the image should also do the trick, in case you need to keep the image inline for some reason.
Have a fresh tip? Share with Coderwall community!
