CODEWITHSUNDEEP
cssspaceunderline
Matt3o12
Matt3o12

Reputation: 4332

CSS - Underline text but ignore the spaces

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: enter image description here

Upvotes: 8

Views: 13241

Answers (3)

Netsurfer
Netsurfer

Reputation: 5542

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 ...!

Upvotes: 7

JohanVdR
JohanVdR

Reputation: 2878

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;
}

Upvotes: 2

Anshul Sao
Anshul Sao

Reputation: 406

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/

Upvotes: 1

Related Questions