8

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

line height: 1em (left) and 0.8em (right)

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

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177

1 Answers1

6

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I didn't think about your second question. I've attempted to do similar things for answers in the past. Here's one of them: http://stackoverflow.com/questions/4994653/add-padding-at-the-beginning-and-end-of-each-line-of-text/4995866#4995866. I'm sure I have a similar but better answer, but I can't seem to find it. Edit: here it is: http://stackoverflow.com/a/7106125/405015. kizu's answer also looks good. – thirtydot Jan 31 '12 at 11:55
  • This doesn't work when using rgba() and a less than 1 opacity. While the background won't cover the text, it still covers itself, darkening the background in the overlapped area. – Aaron J Spetner Nov 27 '13 at 17:23