在href之前img标签之后的神秘空间

Question

I have a mysterious space coming up between an img and href tag. My link, forwarding to a word document is preceded by a space after a small icon, that should actually not be there. Curiously the space only appears if the extension of the link is .doc but disappears when I change it to .docx, or to an .html extension.

This code...

<img  src="../images/icon/wordicon_small.gif" />
    <a href="../docs/template.doc" target="_blank">template</a></p>
<br/>
 <img  src="../images/icon/wordicon_small.gif" />
 <a href="../docs/template.docx" target="_blank">template</a>   

transalates into:

I am really confused. Don't even know where to begin. My CSS specifications seem ok and did not arouse suspicion on my side. Anybody has any idea what the problem could be?

Answer 1

You have a few spaces before your first <a href>

By removing the spaces the problem should be fixed.

If the spaces are generated from a script to html then you need to check the differences of handling doc and docx links between a few statements in your script.

Answer 2

You have white space characters (spaces, line breaks, etc.) between the images and links, so there should be a space between them, but that should only be a single space, just like between the second set of elements. Multiple white space characters in a row collapse into a single space.

Try to retype the spaces between the first image and link. My guess is that you have a non-breaking space (ASCII 160) in there somewhere. That doesn't count as a white space character, so it doesn't collapse into a single space with the spaces and line breaks.

Sometimes non-breaking spaces are used to cause extra spacing between text or elements, as they don't collapse, for example:

Price:         $0.99

displays as:

Price: $0.99

The   is the HTML entity for the non-breaking space, but you can also type it as a regular character. How you do that depends on the editor, but ctrl+space is used in some.