Bizzare tag spacing

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.

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.

Duplicate: http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image — Abhranil Das, Mar 11 '12 at 09:53
@AbhranilDas sorry it seemed all duplicates were solved merely with `display:block` which I can't use in this case. — Hawken, Mar 11 '12 at 15:50

score 2 · Answer 1 · answered Mar 11 '12 at 08:54

2

To understand the situation, think about inline images as letters from a different font/size.

Next, see the examples here: http://phrogz.net/css/vertical-align/index.html

answered Mar 11 '12 at 08:54

biziclop

14,466
3
49
65

score 2 · Answer 2 · answered Mar 11 '12 at 08:57

2

It's caused by a combination of line-height and vertical-align.

Quick example: http://jsfiddle.net/3A3sw/1/

See also http://www.w3.org/wiki/CSS/Properties/vertical-align

answered Mar 11 '12 at 08:57

Tim M.

53,671
14
120
163

score 1 · Accepted Answer · answered Mar 11 '12 at 08:57

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.

Thanks for the explanation, I expected vertical align to be all the way to the bottom not baseline by default, although I can see it makes sense for "fake" characters or inline math equation symbols. — Hawken, Mar 11 '12 at 16:01

score 0 · Answer 4 · edited May 23 '17 at 10:24

0

Inline images often cause a few pixels of blank space to be added below the image in some browsers. If you google this, you'll see it's a common issue. Here are some links for reference. The first is a duplicate Stack Overflow question:

edited May 23 '17 at 10:24

Community

1
1

answered Mar 11 '12 at 08:49

Abhranil Das

5,702
6
35
42

We know that, OP wants to know why. – mreq Mar 11 '12 at 08:57
-1 It's not an "issue"; it's a defined behavior. Also, one of the articles you cite lists a poor way of dealing with the behavior (hard-coded div height). – Tim M. Mar 11 '12 at 08:59
@PetrMarek, is the problem that you would have to click on the links to get the answer? – Abhranil Das Mar 11 '12 at 09:00
@TimMedora, that's why I posted multiple links so one can decide on their own solution. – Abhranil Das Mar 11 '12 at 09:01
@AbhranilDas Yes. Stack Overflow is a Question & **Answer** site. Not a search portal. Links are nice, but should not be the only part of the answer. – Rob W Mar 11 '12 at 09:02
1

@AbhranilDas - I removed my downvote since you added additional references. – Tim M. Mar 11 '12 at 09:04
@RobW, I posted the link to a dupe SO question too, where the answers already exist. And if the answers are well-written elsewhere, I don't see the problem with posting a link instead of copy-pasting part of that same page. – Abhranil Das Mar 11 '12 at 09:05
@AbhranilDas Links alone are not useful. One can argue that he posted a very useful list of, say, 100 links. However, without any description/summary of the linked content, the answer is really useless. Visitors want to get quick answers, they do not want to click through several links before getting to the right answer. – Rob W Mar 11 '12 at 09:16

score 0 · Answer 5 · answered Mar 11 '12 at 09:05

One solution that wasn't mentioned yet is to explicitly set the height of the image and its parent container.

So for example with such HTML

<div class="wrap">
    <div class="line">
        <a href=""><img src="/favicon.ico" /></a>
    </div>
</div>

This CSS will bust the "bizarre" spacing you mention: (which is already explained in other answers here)

div.wrap {background-color:#9f3; width:100px;}
a,img {border:none; height: 16px;}
div.line{background-color: yellow; height: 16px; border-top: 1px solid black; border-bottom: 1px solid black;}

Live test case.

If you don't know the height or have lots of such images, you can use simple client script to set the height automatically.

sorry I have a strict no-javascript-for-css-issues policy. personal preference. Thanks for the suggestion though. — Hawken, Mar 11 '12 at 15:53

Bizzare tag spacing

5 Answers5