'Trim whitespace in link with css

Is it possible to trim whitespaces with css? In the code snippet below there is a extra whitespace in the <a> tag. The link comes out of a wordpress plugin and I don't want to edit the plugin source files. The extra space is inside the source files. What I can do is apply css to the link.

click <a href="#" class="foo">here </a>to login.

Worst case scenario I could use JavaScript. But that seems ugly to me.

css


Solution 1:[1]

You can also do something like this. Altough display: inline-block should be enough to remove the space.

a.foo {
  width : 30px;
  display:inline-block;
}
click <a href="#" class="foo">here </a> to login.

Solution 2:[2]

You could try playing with a negative margin-right, like so

a.foo {
   display: inline-block;
   margin-right: -1em;
   padding-right: 1.25em;
}
click <a href="#" class="foo">here </a>to login.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions