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

dont think you can do that without removing the actual spaces or editing the html in other way. — MightyPork
– MightyPork, Commented Apr 20, 2014 at 13:18
So you'd like to "hide" the original HTML and display a different HTML with your specific formatting...is that right? How are you accessing the original HTML? — TimSPQR
– TimSPQR, Commented Apr 20, 2014 at 13:25

Netsurfer · Accepted Answer · 2014-04-20 14:13:02Z

7

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

edited Apr 20, 2014 at 14:13

answered Apr 20, 2014 at 13:36

Netsurfer

5,5322 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

King King Over a year ago

just setting display:inline-block works great. Using float sometimes is not suitable.

Netsurfer Over a year ago

@KingKing Yes, like always in web design - it depends! But be aware, that it gives not the same result. Using display:inline-block gives you still an additional space (depending on the respective markup).

King King Over a year ago

could you please make some fiddle showing that display:inline-block will fail? because for the OP's HTML code, it works.

King King Over a year ago

Here is the case showing that using float is not really suitable jsfiddle.net/viphalongpro/e8quz/3 , while if using display:inline-block we have the expected result jsfiddle.net/viphalongpro/e8quz/4

Netsurfer Over a year ago

@KingKing No, you got me wrong. It does not "fail". It just gives you a (slightly) different result, as the line-breaks will cause some "extra space". That's all I meant. ;-)

|

JohanVdR · Accepted Answer · 2014-04-20 13:47:13Z

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

edited Apr 20, 2014 at 13:47

answered Apr 20, 2014 at 13:42

JohanVdR

2,8781 gold badge17 silver badges16 bronze badges

1 Comment

Matt3o12 Over a year ago

I'm aware of that and I pointed it out at my question: "there are spaces inside the link ". The problem is: I can't change the HTML as you did. I just have access to the CSS files.

Anshul Sao · Accepted Answer · 2014-04-20 13:43:15Z

1

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/

answered Apr 20, 2014 at 13:43

Anshul Sao

4064 silver badges4 bronze badges

Collectives™ on Stack Overflow

CSS - Underline text but ignore the spaces

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related