Add a background color to text, but with space blank space between lines of paragraph

Question

Hi,

I was wondering if something was possible to do in CSS. Basically i want to recreate the text on the RHS of the image using html/css, but currently I'm getting the LHS of the image.

The HTML:

<div id="banner">
    <div id="text">
        <p>This is an example of what I have</p>
    </div>
</div>

The CSS:

div#banner { background: green; width:300px; height:300px;}
div#text {  margin: 20px auto; }
div#text p {  background:#fff; padding: 5px; margin: 5px; font-size: 2em; }

Now I realise that this can be done already either by:

1. Using an image
2. Using separate p tags

(By Point 2 I mean:

<div id="banner">
    <div id="text">
        <p>This is an</p>
        <p>example of</p>
        <p>what I have</p>
    </div>
</div>

)

But what I would really like to know is if it's actually possible to do what is on the RHS of the image, using only css and a single p tag?

Answer 1

You can achieve your desired effect by using:

• display: inline; to force the background styling on the p to apply to the text, rather than the block on the p, and
• line-height: 2.2em (slightly more than your font size) to force lines between your text

like such:

div#text p {  display; inline; background:#fff; padding: 5px; margin: 5px; font-size: 2em; line-height: 2.2em;}

Answer 2

Because a paragraph tag is a block element, the background will be painted between lines. If you change it to an inline element, or wrap the text in an inline element, you should be able to get the effect you want.

<p><span>This is an example of what I have</span></p>

span {
   background: #fff;
}