CODEWITHSUNDEEP
htmlcss
iefpw
iefpw

Reputation: 7042

Spacing between bullet list rows

How do I set the spacing between bullet lists?

I want to put a little more space between the first and second rows like

<ul>
    <li>asdfasdf</li>
<p />
    <li>asdf23223</li>
</ul>

Upvotes: 22

Views: 128215

Answers (8)

ellipsis
ellipsis

Reputation: 12152

You can use the pre tag. No need for the css

<ul>
  <pre>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    </pre>
</ul>

Upvotes: 1

Heidi
Heidi

Reputation: 39

I just use the so that it will not mess with the styles of all of my other pages when using html and php.

Upvotes: 1

gaynorvader
gaynorvader

Reputation: 2657

Use line-height This will put spacing above and below the text.

Upvotes: 2

Hassaan
Hassaan

Reputation: 326

Use the CSS as:

li { padding: 10px 0px 0px; }
li:first-child { margin-bottom: 0px; }

Upvotes: 1

Eli
Eli

Reputation: 14827

You can just add a margin-bottom for your list item

Demo: http://jsfiddle.net/6tcpd/

Upvotes: 0

Floremin
Floremin

Reputation: 4089

I'm assuming <p /> tag is just a typo, it shouldn't be there ;)

Add this into your <head> tag:

<style>
    ul li { margin-bottom: 10px; }
</style>

Upvotes: 10

Mike Schwartz
Mike Schwartz

Reputation: 2212

You might be able to do something like this:

<ul style="line-height:1.4;">

Upvotes: 13

Mathew Thompson
Mathew Thompson

Reputation: 56429

Add top and bottom padding to the lis, like so:

ul li { padding: 5px 0px; }

And take out that crazy looking <p /> tag.

Demo: http://jsfiddle.net/aFED2/

Upvotes: 32

Related Questions