Increasing space between BR list items

[rogerd]

I've got a list of items separated by <br> tags. Normally they display like this (<br> tags don't actually show, of course):

-----------
List item 1<br>
List item 2<br>
List item 3<br>
-----------

But if I've got long items, the display comes out more like this:

-----------
Fairly long
List item 1<br>
Fairly long
List item 2<br>
Fairly long
List item 2<br>
-----------

I'd like to add a little space between the items so it looks more like:

-----------
Fairly long
List item 1

Fairly long
List item 2

Fairly long
List item 3
-----------

This list is software generated. I can hack the code to turn the <br> tags into <p> tags or add another <br> to get the spacing, but is there a way to do this with CSS? I'd prefer just to edit the style sheet so that future code upgrades are easy to implement.

I think the issue is that the entire list is in a <div>, e.g.,

<div class="list">
List item 1<br>
List item 2<br>
List item 3<br>
</div>

So, without adding classes to each line, can I increase the spacing?

[SethCall]

br
{
line-height:XXpx;
}

or, if you want to only affect those br's contained by that div,

.list br
{
line-height:XXpx;
}

[drbrain]

<ul class="unstyled extra-space">
<li>Item 1
<li>Item 2
<li>Item 3
</ul>

ul.unstyled { display: block }
ul.extra-space li { margin: .5em 0 }

[Reflection]

Why not use lists?

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Then set the line-height on the list items and add any other styling you want.

DrBrain, <ul> are block level elements so you don't need to set them to display:block;

[SethCall]

Well, it seems he didn't want to mess with the server-side code...

[rogerd]

I like your solution, SethCall, as it addresses the issue precisely (only modifying the stylesheet). Elegant. Oddly, however, it isn't working as expected and it will probably be easiest just change the code.:( Thanks, all.

[SethCall]

its not workin? :/ ummm,
I definitely tested it.

Strange

[drbrain]

Reflection: oh yes, I meant list-style: none; instead.

[mep00]

I can hack the code to turn the <br> tags into <p> tags or add another <br> to get the spacing, but is there a way to do this with CSS?

If you're already willing to hack the code, why not hack it a little more to generate the semanticly correct HTML: a ul with li's? That would seem to be the best solution.