Inline images showing a gap of space on the bottom, and one way to get around it

For a current project, I’m needing to post an image of a calendar inline with some select boxes. The calendar image would serve to popup a table of calendar dates. It is to look like this:

Here was the html to be used:

<p>
	<select name="checkInDay">
		<option value="">Day</option>
	</select>
	<select name="checkInMonth">
		<option value="">Month</option>
	</select>
	<a class="ico-cal" href="#">
		<img src="images/ico_calendar.gif" alt="Select" />
	</a>
</p>

The problem was that a small gap of space was appearing under the calendar icon, so that it looked like this:

Firefox example
Safari Example
IE example

In doing some research, I came across this page, which had a very good description of the problem. It turns out that the gap under the image is present for a reason – for the descenders of text that reside on the same line as my image

For instance, my image was treated the same way as a lowercase ‘o’. If that ‘o’ were sitting next to a lowercase ‘p’, we’d see that room was made for the stem of that ‘p’.

According to that page, there were two ways of getting around the problem. One was to set the image to be a block element using ‘display:block;’. That didn’t work so well for me, as it would have required a handful of other css declarations to keep the img inline with the rest of the sentence and at proper spacing from the other selects.

Instead, I went with the second suggestion, which was to use the vertical-align property in the css file. Since I develop in Firefox first, I found that vertical-align:sub; worked, like so:

a.ico-cal img {vertical-align:sub;}
Firefox example
Safari example

… but this did not work IE 6 or 7, which displayed vertical-align:sub; like so:

IE Example

Yikes. So it turns out IE doesn’t treat vertical-align:sub the same way Firefox and Safari do, but I did find that IE will display it correctly using the following:

a.ico-cal img {vertical-align:bottom;}

So I used my IE conditional comments to serve vertical-align:bottom; only to IE, and now all browsers show the image inline in the ideal manner.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


dlee said:
I have tried img {vertical-align:sub;} but there is still little space left at the bottom of an image.
One method that I found to remove space below image element is using negative margin. Adding img {margin-bottom: -3px;} seems to take care of the problem. It was tested on FF 2.0, IE 6, and IE 7.

ark said:
I had a row of images in their own that was having the ‘gap under the image’ issue.
My solution was simply to set the css ‘line-height’ property to ‘0’ for this . This effectively gets rid of the space for the descenders in ‘p’ and ‘q’ etc.
CSS:
#mydiv { line-height: 0; }

Aad said:
img { display : block }