[CSS] Whitespace between nested list

Question

Hi everyone!

I'm building a website, but encountered a little problem. I have created a nested list with html, but I want to see some whitespace between choices.

             <ul>
                <li>Mini onderhoud
                    <ul>
                        <li>Computer stofvrij maken.</li>
                    </ul>
                </li>
                <li>Klein onderhoud
                    <ul>
                        <li>Computer stofvrij maken.</li>
                        <li>Computer controleren op malware (virussen, spyware, adware, trojans, ...).</li>
                        <li>Opruimen van onnodige software en bestanden.</li>
                        <li>Computer controleren op fouten.</li>
                    </ul>
                </li>
                <li>Groot onderhoud
                    <ul>
                        <li>Computer stofvrij maken.</li>
                        <li>Computer controleren op malware (virussen, spyware, adware, trojans, ...).</li>
                        <li>Opruimen van onnodige software en bestanden.</li>
                        <li>Computer controleren op fouten.</li>
                        <li>Backup maken van alle bestanden.</li>
                    </ul>
                </li>
                <li>Deluxe onderhoud
                    <ul>
                        <li>Computer stofvrij maken.</li>
                        <li>Computer formatteren en Windows herinstalleren.</li>
                        <li>Software (o.a. Microsoft Office, anti-virus, firewall, ...) herinstalleren.</li>
                        <li>Backup maken van alle bestanden.</li>
                    </ul>
                </li>
            </ul>

How do I get some whitespace between each first li element? So, I need whitespace between Mini onderhoud and Klein onderhoud, between Klein onderhoud en Groot onderhoud, and so on. I tried with br, but this is not XHTML 1.1 Strict. Any other solutions?

THANKS!

Answer 1

Assign the <li> elements with a class name.

<li class="spacing">

Add a css style:

li.spacing {
  margin-bottom: 10px;
}

Answer 2

Use css anc classes - you could assign a class of (say) "toplevel" to your top level <li> items that you want to give the spacing to, then in your css have:

.toplevel li {margin:0 0 5px 0;}

Answer 3

If I understand you correctly you want:

li { 
  margin-bottom: 1em; /* or what ever */
}

li li {
  margin-bottom: 0;
}

Answer 4

Add a class to the first(parent) ul <ul class="navi"> and then add a css style

ul.navi > li{
    margin-bottom:10px;
}

Answer 5

Start by giving your outer ul an ID so that you can write a CSS selector that selects only the outer lis:

<ul id="foo">
    <li>Mini onderhoud
    ....
</ul>

The CSS:

#foo > li {
    margin-bottom: 10px; /* this could also be padding-bottom */
}

And you don't really mean the "first" li element.