I noticed an annoying issue while working on some design elements on the survey element of my configurable feedback system Kinetica (for Touchwork) the other day. Essentially an image nestled inside a <div> element was rendering with an unsightly little line of space underneath it, breaking the visual effect that I wanted.

Perplexed (because the CSS inspector wasn’t showing anything untoward), I turned to Google and pretty soon had both the reason and the solution.

As it turns out, by default images are rendered as inline elements as opposed to block elements. In other words, it is rendered and treated like a letter/character, meaning that by default the line it is on has space below for the ‘descenders’ that you find on letters like y, j, p and q. This is then the line that you see below the image, because obviously it sits square on the line.

There are three possible fixes you can employ here. If you don’t want to do anything unnatural, you can get around the problem by simply specifying an appropriate vertical-align css style on the image, e.g. style=”vertical-align:bottom;”

Another fix that will work quite nicely is by specifying the line height of the parent container to 0 pixels, e.g. #div { line-height: 0;} <- of course, this assumes that you’re not going to have text anywhere in this parent container.

Finally, a just as effective trick would be to simply declare the image to be displayed as a block element, e.g. style=”display:block”

So with all that said and done, employing any of the tricks above will turn this:

thin line under image in div

into this:

thin line under image in div solved

Related Link: W3Schools