Пробелы между вложенным списком

Question

Я создаю сайт, но столкнулся с небольшой проблемой.Я создал вложенный список с html, но я хочу видеть пробелы между вариантами выбора.

             <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>

Как получить пробел между каждым первым элементом li?Итак, мне нужно свободное пространство между Mini-onderhoud и Klein-onderhoud, между Klein-onderhoud и Groot-onderhoud и так далее.Я пробовал с br, но это не XHTML 1.1 Strict.Любые другие решения?

СПАСИБО!

Answer 1

Присвойте элементам <li> имя класса.

<li class="spacing">

Добавить стиль CSS:

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

Answer 2

Добавить класс к первому (родительскому) ul <ul class="navi"> а затем добавить стиль CSS

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

Answer 3

Если я вас правильно понимаю, вы хотите:

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

li li {
  margin-bottom: 0;
}

Answer 4

Используйте классы CSS и Anc - вы можете назначить класс (скажем) "верхнего уровня" для вашего верхнего уровня <li> элементов, которым вы хотите дать интервал, тогда в вашем CSS есть:

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