Question

I got a CSS question related to this fiddle: http://jsfiddle.net/r584e/
Here the relevant screenshot

Sometimes I’ve got to style an inline element in a such way, trying to almost avoid space between rows and applying a background only under the text. As you can see, the first paragraph has a link inside, in which I set line-height: 1em . The paragraph on the right has instead a line-height: 0.8em;. (Note: I know in this way I could roughly cut some letters – like q,g,p,… but the text is uppercase so it’s not really a problem)

In the second paragraph rows are actually closer (as I want) but unfortunately each row is also partially overlapping the previous one (unless you remove the background color applied) and this is not good (e.g. see the word «uppercase» on the bottom), so here my questions:

1. how can I get the rows closer (like paragraph on the right) without them overlapping each other and defining a background color (no matter the element in which it is applied but it has to stay under the text, not fill a whole block)
2. Optionally there is a way to add an horizontal padding to each line of text?

Feel free to change the CSS and/or markup. I’m looking for a pure CSS workaround.
An optimal solution should work on modern browser and, if possible, at least from IE8+

Thank you in advance. =)

Edit:
About 2nd question, using @thirtydot solution I can add space (to the right) using white-space: pre-wrap applied on the span element

Answer 1

Simply add a wrapper element inside the em, such as a span, and apply position: relative.

See: http://jsbin.com/axefaf

<a href="#"><em style="line-height: 0.8em">
    <span>This is an uppercase multirow text inside a link element</span>
</em></a>

span {
    position: relative;
}

This works in all modern browsers and IE8, but does not work in IE7.