<ul> has extra margin or padding on left and how to get rid of it

it seems that <ul> has extra margin or padding to the left of it even when bullet is set to not to show…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"


		<style type="text/css">
        	ul {

		<div style="width: 300px; font: 12px Arial;background:#ff0">
				<li>hello world hello world hello world hello world</li>

On IE 6 and 7, we can get rid of the left spacing by margin-left: 0 (by adding to the style of “ul”)
and we need an extra margin-bottom: 0 to get rid of extra margin at the bottom.

But adding those won’t work on FF and Chrome. We need padding-left: 0 so that the spacing is gone.

So i just added margin: 0; padding: 0 to the style of “ul” and it seems to work all fine.

Is this the general rule? It seems that designers like to use <ul> to design for tab, links, etc… is it because they make more semantic sense? just that the extra spacing will cause problem when there are elements near by and the <ul> items get wrapped to the next line. thanks.

As you have found out, different browsers use different method for providing list indent - in general, control both margin and padding. If you use a universal reset to reset the margins and padding of everything, then this is a non-issue.

i tried to use

	LI:before { 
               display: marker;
               marker-offset: 9em;

to see if i can change the spacing by this method but it doesn’t work… any idea? thanks.

i tend to not use

  * { padding:0; margin: 0 } 

coz it create weird spacing for the radio buttons and maybe for other controls like the check boxes.


ul, ol { padding:0; margin: 0 }

will sort out the list issue.