Grow your CSS skills. Land your dream job.

Pesky, Linked Space Under Images

  • # May 1, 2013 at 5:31 pm

    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 “”)

    # May 1, 2013 at 7:15 pm

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

    # May 1, 2013 at 7:27 pm

    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.

    # May 1, 2013 at 7:32 pm

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

    # May 1, 2013 at 8:09 pm

    Thanks everybody, you’re my CSS heroes.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".