Question

Why is there some strange spacing with <img/> tags in a paragraph <p>?

I noticed this from using firebug where the img is maybe 4-5 pixels above where the text should be inline.

Example:
http://jsbin.com/epavij

Here the <a> tag is surrounding the <img/> and the <a> is shown to take up a smaller space down a few pixels.

Obviously display:block fixes this problem, but what is causing it?

For argument’s sake I plan to have the image inline with some text; though I have tested, and adding text does not fix the problem.

Answer 1

this happens because of “baseline” which happens to elements that are inline. “baseline” is the default (correct me if i’m wrong) vertical-alignfor elements, most notably for inline elements (like span and anchors)

to show you what i mean, try placing text like the letters “qfx” right beside the image. you will notice that the bottom of the image is in line with the bottom of “x”. that’s the baseline alignment – on which your <img> tag is sitting on.

but the anchor tag will occupy until the bottom of “q”. anchor tags will occupy beyond the baseline, until the bottom.