1

I've this snipped for which I want to remove the space between the link and the upcoming text, but I can't figure our how to do it. I've tried using padding and margin, but nothing works.

HTML:

A <a href="#" style="letter-spacing: 1em;">link</a>. Some text.

Output:

enter image description here

Here's is an example: http://codepen.io/anon/pen/gPQVXx

Linus Oleander
  • 17,746
  • 15
  • 69
  • 102

6 Answers6

2

You could try removing the letter-spacing on the last letter of the word.

A <a href="#" style="letter-spacing: 1em;">lin<span style="letter-spacing: 0;">k</span></a>. Some text.

It's not a neat solution, but if it's a one-off it'll get the job done. If not for the underline from the link, a negative right margin equal to the letter spacing would have done the trick as well.

partypete25
  • 4,353
  • 1
  • 17
  • 16
  • I don't really like this solution. The space *after* the word must be a common problem and therefore also be possible to solve in a proper way. – Linus Oleander Feb 10 '16 at 04:39
  • @oleander After a little google search i found this page which discusses your problem also. Good to know if you need a solution that is not a one-off https://iamsteve.me/blog/entry/remove-letter-spacing-from-last-letter – partypete25 Feb 10 '16 at 04:40
  • @Oleander You would think so wouldn't you? Like i said, it just depends on how often you will have this issue and what type of application you are using. If this is the only place you need ot do it, and it's not something that is going to be changed or editable (like in a cms) then it is a perfectly fine solution. Otherwise you'll need to find a better, more scalable solution. – partypete25 Feb 10 '16 at 04:44
  • I assumed that most hacks were fixed with CSS3, but that might not be the case when I read all the suggestions I got. Thanks for your effort tho, I think this would be the best solution, even tho it's not perfect. +1 – Linus Oleander Feb 10 '16 at 04:53
2

This behavior is a clear violation of the spec.

A given value of letter-spacing only affects the spacing between characters completely contained within the element for which it is specified:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>bb</span>c</p>

enter image description here

This also means that applying letter-spacing to an element containing only a single character has no effect on the rendered result:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>b</span>c</p>

enter image description here

An inline box only includes letter spacing between characters completely contained within that element:

p    { letter-spacing: 1em; }
<p>a<span>bb</span>c</p>

enter image description here

It is incorrect to include the letter spacing on the right or trailing edge of the element:

enter image description here

You only have to wait until browsers fix this. I suggest against fixing it with hacks like negative margins because it will backfire when browsers implement the standard behavior.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Good answer, thanks. I dont think this will be solved anytime soon, but it's good to know that it's not suppose to work like this. +1 – Linus Oleander Feb 10 '16 at 04:49
1
A <a href="#" style="letter-spacing: 1em;">lin</a><a href="#">k</a>. Some text

This is ugly, but it does the trick. JSFiddle

CaliKane
  • 104
  • 1
  • 9
1

Although this answer has been accepted, I do not recommend using it. It breaks in some browsers and won't be compatible with screen-readers. Besides that, it is also bad practice to just flip letters around. I've created this answer to show some of the possibilities, not as a good solution

That being said. Here it is.

It does require some extra effort, but it works without the use of negative margins or extra html.

You basically have to swap all the letters around, and you're good to go!

This works because of the use of two things. letter-direction and :first-letter.

a{
  display: inline-block;
  letter-spacing: 1em;
  direction: rtl;
  unicode-bidi: bidi-override;
}

a:first-letter{
  letter-spacing: 0;
}

This would've been much easier with a :last-letterselector :)

Hope this helps

Vincent Vanille
  • 106
  • 5
  • 1
    Aha, that worked. How good is the browser support, do you know? +1 – Linus Oleander Feb 10 '16 at 04:55
  • `:first letter`, as well as the `direction` property are completely supported by all major browsers. `:first letter` has been here since CSS1, and `direction` since CSS2 – Vincent Vanille Feb 10 '16 at 05:10
  • 1
    @Oleander I'd hate to be a screen reader reading your backwards links! – partypete25 Feb 10 '16 at 13:26
  • 1
    I thought something like this too, but [looks horrible on Firefox](http://i.stack.imgur.com/7BVhh.png) and [doesn't work as desired on Chrome](http://i.stack.imgur.com/i7UTW.png) neither. It works great on IE and Edge, though. – Oriol Feb 10 '16 at 17:27
  • I've altered my answer. It shouldn't be accepted, to be honest – Vincent Vanille Feb 10 '16 at 17:46
-1

Try this

    A <a href="#" ><span style="letter-spacing: 1em;">lin</span>k</a>. Some text.
Shariq Ansari
  • 3,941
  • 1
  • 27
  • 30
-1

you can try this one:

A <a href="#" style="letter-spacing: 1em;">lin<span>k</span></a>. Some text.

CSS

span{
  letter-spacing: 0;
}

HERE MY DEMO

Ivin Raj
  • 3,448
  • 2
  • 28
  • 65