How do I indent lists using CSS?
There really isn’t a proper way. Both the Gecko-based browsers and Internet Explorer interpret the CSS specifications differently. To ensure consistency the best thing to do is clear the left padding and margin values, which brings the bullets flush to the edge of the box (i.e., there is no indent).
To indent the bullets by, say 20 pixels, you can set either the left padding or margin:
ul { margin-left: 0; padding-left: 20px; }
or
ul { margin-left: 20px; padding-left: 0; }
(The same rules can be applied to ol, dl, as well as ul.)
Eric A. Meyer has written an in-depth explanation on this topic.