Pesky, Linked Space Under Images

[siouxfan45]

This is officially driving me insane. I’m making a most popular posts sidebar display and the images have a bit of an extra space under them which is being linked that I would like to get rid of.

[In this example](http://themeforward.com/demo2/ “”), you can see it in green in the sidebar on the right.

To make troubleshooting a bit easier, I’ve thrown it into Codepen without the colors. You may notice that the pesky linking space is still being created under each image.
[http://codepen.io/anon/pen/ybIeB](http://codepen.io/anon/pen/ybIeB “”)

[will_wallace85]

Not sure exactly why but setting font-size to 0 on the a tag containing the image seems to have fixed the problem.

[CrocoDillon]

It’s a common thing with img elements, because they are inline elements with their bottom vertical aligned to text baseline (even if there isn’t any text around it, that causes the gap, that’s why font-size: 0 works too). Setting the `vertical-align` property of the `img` to almost anything but `baseline` fixes this.

[TheDoc]

I almost always go with a `display: block;` on the image.

[Author]

Posts