How to decrease height of blank lines only?

[may_hem1]

Hi, I have a few paragraphs of text and I want to add one background image to the whole group of paragraphs.

They are currently written like this:

<p>my paragraph 1</p>
<p>my paragraph 2</p>
<p>my paragraph 3</p>

I changed this to:

<p class="backImage">my paragraph 1<br />
<br />
my paragraph 2<br />
<br />
my paragraph 3</p>

And I added the appropriate CSS to insert a background image.

The problem is that now the space between each of the three paragraphs has increased noticeably.

I changed the line-height attribute in the CSS file to 90% but this squashed the text in each paragraph together.

Is there a way to decrease the space between each paragraph without decreasing the space between two consecutive lines of text?

Thanks,
May

[benihana]

<p>my paragraph 1</p>
<p>my paragraph 2</p>
<p>my paragraph 3</p>

p{
margin-top:0px;
margin-bottom:48px;
line-height:90%;
}

and adjust to suit.

[createErrorMsg]

each of the three paragraphs

Technically, your second set of code (the one with the <br /> tags), isn't three paragraphs. It's one paragraph hacked to look like three paragraphs.

If you want to set a single backgroudn image behind all three paragraphs, the best approach is to put the paragraphs into a container, and apply the image as a background on that...

html:
<div id="p_box">
<p>Lorem ipsum.</p>
<p>Dolor sit.</p>
<p>Amet consecateur.</p>
</div>

css:
#p_box{
background:url(path/to/image.gif);
}

This maintains the proper semantic structure of the document whil giving you a hook for the bakcground style. The space between the paragraphs can be easily manipulated using the margin-bottom property on the <p>, without effecting the line spacing within each paragraph at all.

cEM