What controls horizontal space between levels of nested list?

Answer 1

vertical space is generally controlled through CSS with line-height. For example,

li { line-height: 40px; }

You may find this article useful, which lists some of the common CSS attributes used to style lists

EDIT:

In response to your edited question, you can control horiztonal spacing using margin-left. for example

<ul>
 <li>num 1
  <ul>
   <li>num 1.1</li>
   <li>num 1.2
    <ul>
     <li>3rd level</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>num 2</li>
</ul>

with CSS

li ul li {  margin-left:100px; }

will space lists of depth 1 or more 100px to the right. Here's how that looks

Answer 2

I generally turn off an margin padding and line-height for li, ul, ol in CSS. I'm almost certain most browsers use margins to set this, but to be sure I set them all to 0.

ul, ol, li {
    padding: 0;
    margin: 0;
    line-height: 0;
}

Answer 3

It seems to me your html is wrong, you cannot have an ul inside an ul. The correct syntax is:

<ul>
 <li>num 1
  <ul>
   <li>num 1.1</li>
   <li>num 1.2
    <ul>
     <li>3rd level</li>
    </ul>
   </li>
  </ul>
 </li>
 <li>num 2</li>
</ul>

Notice that all the closing li's have moved to the end of that list item (including it's sub-items).

Using a css reset it should display the same way in all browsers (more or less...).

Answer 4

Depends on how you want to add the spacing. You can use either top/bottom margin or padding. In your case I would choose margin:

li {
    margin: 5px 10px 5px 1em;
}

Also make sure you use a reset class to normalise the differences between browsers.