Tutorial Ref.com

How to Create Vertical Spacing Between Lists Using HTML LI Tag & CSS

Tutorial Ref >> CSS Tutorials >> Create Vertical Spacing between LI Tags

Date modified - April 3, 2009

This is how to create vertical spacing between lists using the HTML <li> tag and CSS. Here is a sample of an unordered list code in plain HTML:

1
2
3
4
5
6
7
8
9
10
11

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li style="list-style-type:none">
        <ul>
            <li>item 2 sub-list 1</li>
            <li>item 2 sub-list 2</li>
        </ul>
    </li>
    <li>List item 3</li>
</ul>

The above HTML code is rendered in Mozilla browser (i.e. Firefox 3.x and greater), IE 7.x and greater and Safari 3.2 and greater on my Vista Home Premium as follows;however, please note the <li> html tags that are surrounding the inner <ul> tags. This is required for W3C strict validation;otherwise, you'll receive errors.

  • list item 1
  • list item 2
    • item 2 sub-list 1
    • item 2 sub-list 2
  • List item 3

Now to create vertical spacing between the HTML li tags all you need is some CSS styling using margin-bottom like so:

1
2
3
4
5
6
7
8
9
10
11

<ul style="margin-bottom:10px;">
    <li style="margin-bottom:10px;">list item 1</li>
    <li style="margin-bottom:10px;">list item 2</li>
    <li style="list-style-type:none">
            <ul style="margin-bottom:10px;">
                <li style="margin-bottom:10px;">item 2 sub-list 1</li>
                <li style="margin-bottom:10px;">item 2 sub-list 2</li>
            </ul>
    </li>
    <li style="margin-bottom:10px;">List item 3</li>
</ul>

The above code looks like the following:

  • list item 1
  • list item 2
    • item 2 sub-list 1
    • item 2 sub-list 2
  • List item 3

The above UL and LI tags format as expected. The only bug I encounterd was with Internet Explorer 7.x and greater is the second UL tag didn't properly have the vertical spacing. So to resolve this bug in IE simply add margin-top to the second UL tag as so:

1
2
3
4
5
6
7
8
9
10
11

<ul style="margin-bottom:10px;">
        <li style="margin-bottom:10px;">list item 1</li>
        <li style="margin-bottom:10px;">list item 2</li>
        <li style="list-style-type:none">
                <ul style="margin-bottom:10px;margin-top:10px;">
                    <li style="margin-bottom:10px;">item 2 sub-list 1</li>
                    <li style="margin-bottom:10px;">item 2 sub-list 2</li>
                </ul>
        </li>
        <li style="margin-bottom:10px;">List item 3</li>
    </ul>

The above code looks like the following:

  • list item 1
  • list item 2
    • item 2 sub-list 1
    • item 2 sub-list 2
  • List item 3

Oddly enough, there was no extra spacing with Firefox 3.x and greater and Safari 3.2 and greater.

TutorialRef.com - tutorials, guides, how-tos, helps