CSS - Underline text but ignore the spaces

Question

I have a couple of links that have a margin-left of 3px. These links are underlined and look like that:

<a href='#'>
    test
</a>

Unfortunately, there are spaces inside the link and I'm not able to remove these space since I don't have access to the HTML code. These spaces are also underlined, which I'm not happy with. Is there any way to remove them without changing the HTML?

Here is a fiddle that shows my problem: http://jsfiddle.net/e8quz/

Update:
Here is a picture, what I want it to look like:

Answer 1

The spaces come from the line-breaks (well-known from the display:inline-block problematic).

So make your a elements display: block and float them to the left.

DEMO

PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!

Answer 2

See here: http://jsfiddle.net/BWc2U/2/

This will also solve the issue. There is no need to make them floats, with the floats you need to clear the floats otherwise all content after will also be floated etc...

a {
  margin-left: 5px;
  display: inline-block;
}

Answer 3

You can just float the links to make the white space disappear without editing the html

a {
    margin-left: 5px;
    float: left;
}

http://jsfiddle.net/e8quz/2/