How do i add space(margin-bottom ) between the li's of my ul?

Problem

Hi i am trying to add some space below each li of my ul. When i try to set margin-bottom on the li it does not work it just adds margin above the first li element of the list. Can someone tell me how i can add a space(margin) bellow each li

Problem courtesy of: vijar

Solution

ul li{margin-bottom:10px;}

You can check the example here: http://jsfiddle.net/gdfxk/

Solution courtesy of: Vivek

Discussion

I have just tried that:

http://jsfiddle.net/UV99e/2/

And it seems to work.

Html :

<ul class="ul1">
    <li>Toto</li>
    <li>Titi</li>
    <li>Tata</li>
</ul>

<ul class="ul2">
    <li>Toto</li>
    <li>Titi</li>
    <li>Tata</li>
</ul>

<ul class="ul3">
    <li>Toto</li>
    <li>Titi</li>
    <li>Tata</li>
</ul>

CSS :

li
{    
    background-color : gray;
    height : 25px;
}

.ul1>li
{
    margin-bottom : 0px;
}

.ul2>li
{
    margin-bottom : 5px;
}

.ul3>li
{
    margin-bottom : 5px;
}
Discussion courtesy of: dooxe

This recipe can be found in it's original form on Stack Over Flow.