line-height question..

hi,

what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:

<div class="headlines">
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
</div>

I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:

..headlines {font-size:14px; line-height:20px; }

do I have to do one div per headline... I'm hoping there's a better way..

thank you very much..

On 2007-11-06, maya <maya778899 (AT) yahoo (DOT) com> wrote:

hi,

what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:

div class="headlines"
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br
/div

I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:

.headlines {font-size:14px; line-height:20px; }

do I have to do one div per headline...

Why not?

If you don't want to then you could do this:

br { display: block; margin-top: 20px; }

I'm hoping there's a better way..

What's wrong with the extra elements?

maya wrote:

hi,

what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:

div class="headlines"
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer goes here lorem ipsum
viderer<br
Article Headline goes here lorem ipsum viderer<br
Article Headline goes here lorem ipsum viderer goes here lorem ipsum
viderer<br
/div

I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:

.headlines {font-size:14px; line-height:20px; }

do I have to do one div per headline... I'm hoping there's a better way..

Well let's see your have a list of headlines...why are your not using a
list?? Also line-height is the "height of the line" of text, of course
is would not be added "between"! That is the function of margins and
padding.

BETTER:

/* adjust to suite */
ul.headlines {
margin: .5em; padding: 0; list-style: none; font-size: 1.5em;
}
ul.headlines li { margin: 0 .5em; }


<ul class="headlines">
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</li>
</ul>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com