Unwanted spacing below images in XHTML 1.0 Strict

Question

My goal is to use the XHTML 1.0 Strict DOCTYPE for this page I'm working on, but I'm running into some weird design issues..

I have the below code:

<div><img src="photos/someimage.jpg" alt="Title" /></div>

When I load the page with DOCTYPE set to 1.0 Strict, a little gap of spacing is added below the image, within the div. I've removed all whitespace/line breaks in the code, which seems to be the usual culprit for this sort of issue.. If I change the DOCTYPE to 1.0 Transitional the spacing is gone and the page looks as it should.

Anyone know of a way to avoid this issue while still using 1.0 Strict?

Thanks for your time!

Answer 1

http://www.schoonzie.com/rogue-padding-below-images

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

The other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. For example, you could try the following:

div img {vertical-align: bottom;}

Answer 2

Try this

<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div>