Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Avoid overlapping rows in inline element with a background color applied

Avoid overlapping rows in inline element with a background color applied

Problem

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

Problem courtesy of: fcalderan

Solution

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

See: http://jsbin.com/axefaf


    This is an uppercase multirow text inside a link element


span {
    position: relative;
}

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

Solution courtesy of: thirtydot

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Avoid overlapping rows in inline element with a background color applied

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×