How can I increase space between bullets in HTML?

[Dayne Dylan]

I've got a large list, all bulleted in a new website, and for the life of me...I can't figure out how to add a bit more space between them (white space). I'm sure this is simple.

Can someone chime in on what to do?

Thanks so much!

[Derek S]

attach one or two <br> after each bullet in the code

[Karen Newton]

Try just adding a new line code after each bullet:

<br />

[GrantFreeman]

Horizontal space, or vertical space?

Grant

[Dayne Dylan]

I don't want a full break between the bullet points. That is too much space.

Maybe about half a break space would be good.

I have a large, vertical list Grant.

[Karen Newton]

You can likely do this with CSS,

.half {
line-height: 0.5em;
}

Or try: line-height: 50%;

Then in your html:

<br class="half" />

Not sure if this will work or not, haven't tried it before, but I think it will...

[Derek S]

The CSS might work. If not, you will have to create a table and just set the cell padding to what ever you want.

[TelegramSam]

css is the way to go.

google for it.

[Dayne Dylan]

Thanks, got it licked.

Thanks to all of you Warriors!

[RedMatrix]

What was your final solution Dayne?

[Steven Fullman]

Originally Posted by RedMatrix

What was your final solution Dayne?

Originally Posted by JeyKumara

Like to how did you resolve it at the end. thanks

He used Karen's CSS code, almost certainly.

I'm surprised more folks aren't into CSS. What with its ability to kick major web design ass, 'n all.

Steve

[YellowDot Software]

The way I would do it so I didn't have to put the code in every single <li> tag is this:

<ul class="paddedList">
<!-- list elements here -->
</ul>

Then the css:

.paddedList ul li {
padding-bottom:5px;
}

That means you just put the class on the unordered list tag and it applies it to all the li tags of any ul with class "paddedList" That means if you want to change something you don't have to remember to add/change the code in every element

[Dayne Dylan]

Yep, I used some simple CSS coding. Worked like a charm.

Thanks everyone!

[Karen Newton]

Originally Posted by YellowDot Software

The way I would do it so I didn't have to put the code in every single <li> tag is this:

<ul class="paddedList">
<!-- list elements here -->
</ul>

Then the css:

.paddedList ul li {
padding-bottom:5px;
}

That means you just put the class on the unordered list tag and it applies it to all the li tags of any ul with class "paddedList" That means if you want to change something you don't have to remember to add/change the code in every element

Cool.. there's always more than one way to skin a cat That's a more efficient method above.

Karen

[Allen Graves]

You can also use inline css:

<ul>
<li style="margin-bottom: 6px;">item1 goes here</li>
<li style="margin-bottom: 6px;">item2 goes here</li>
<li style="margin-bottom: 6px;">item3 goes here</li>
</ul>

The css file solution is the best - but if you are only creating a single bulleted list on a webpage or article or blog or whatever, inline CSS will work fine too.

I love CSS and I too don't see why more people don't use it.

Allen

[Valeriu Popescu]

For a simple paragraph, and sometime for headers, I use a line like this:

<p style="margin-top: 10px; margin-bottom: 8px;">You text here...</p>

Valeriu

[RedMatrix]

Originally Posted by Dayne Dylan

Yep, I used some simple CSS coding. Worked like a charm.

Thanks everyone!

We want to see the actual code.