How to avoid whitespace anchor underline w/o changing coding style?

Question

Take a look at the following fiddle:

http://jsfiddle.net/DNhAk/14/

When you have an image with text wrapped in an anchor/link, the whitespace between the image and the text in the code creates a underlined whitespace in the rendered page right before the text.

When there is no image, there is no underlined whitespace even though there is whitespace in the code.

The only way I can see the avoid this underlined whitespace is to eliminate the whitespace in my code. But I hate altering my coding style in order to alter the presentation of the rendered page. Anyways, altering your HTML in order to manipulate the presentation of a page is wrong anyways. It's like using line breaks (<br/>) to add space between elements instead of using CSS.

Is there a not-so-obvious-to-me CSS property that is used to fix this issue?

UPDATE For some reason people are getting hung up on the image borders and margin that I had in the code. I only put them in there to make it look nice. They have nothing to do with the problem, so I removed them and updated the fiddle just so people can understand more clearly what the problem is.

Answer 1

You could set the CSS for the a element like this:

a {
    display: inline-block;
}

Answer 2

The behavior you are experiencing is part of the spec ( http://www.w3.org/TR/html401/struct/text.html ) :

For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.

This layout may involve putting space between words (called inter-word space), but conventions for inter-word space vary from script to script. For example, in Latin scripts, inter-word space is typically rendered as an ASCII space ( ), while in Thai it is a zero-width word separator (​). In Japanese and Chinese, inter-word space is not typically rendered at all.

So by adding an element (img) followed by whitespace (newline) in your markup, you instructed the agents to interpret your image as a "word", and add whitespace as appropriate to the language the agent is set in. If you would like to remove this whitespace from the result, you will need to remove it from the markup.

Alternately, you could remove the image from your markup entirely, and place it instead as a background on the anchor, thus eliminating any presentation pieces from your markup. Example here:

<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>

CSS:

.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}

There are some weaknesses to this method of course, but it is a potential solution depending on your other constraints.

http://jsfiddle.net/hellslam/pvHK8/