How do padding and margin work on lists?

Forum Moderators: not2easy

Message Too Old, No Replies

How do padding and margin work on lists?

I've tried several things, can't understand it all

MatthewHSE

9:05 pm on Mar 8, 2005 (gmt 0)

So I've been experimenting with different margins and paddings on lists, and so far I can't seem to figure it out. The object I'm after seems simple enough; I want less of an "indent" (is that padding or margin?) on the left edge. In other words, I want the little dots to be right at the edge of the containing box.

But I've tried setting margins and paddings to several different values on both the <ul> and <li> tags, to no avail.

Padding on the <li> tags appears to have no effect. Padding on the <ul> tags turns the bullets invisible in IE. A negative margin on each <li> tag does produce the desired result, while a margin on the <ul> also turns the bullets invisible in IE.

Like I said, I can get the result I want by using a negative margin on the <li>'s. But I'd like to understand exactly how margins and paddings work on lists and list items. Does anyone have any explanations?

Thanks,

Matthew

sldesigns

10:20 pm on Mar 8, 2005 (gmt 0)

Try this thread:
[webmasterworld.com...]
it has lots of good info about this.
cEM posted the following there, which I found most helpful:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> 
<head> 
<title>UL bullet Test</title> 
<style type="text/css"> 
.menu{ 
margin:10px 0px; 
} 
.menu ul{ 
list-style-image: url(bullet.gif); 
font: 0.8em verdana, sans-serif; 
background-color: #eee; 
} 
#with_padding{ 
margin:0; 
} 
#with_margin{ 
padding:0; 
} 
#with_neither{ 
padding:0;margin:0; 
list-style-position:inside; 
} 
#explicit_padding{ 
padding-left:20px;margin:0; 
} 
#explicit_margin{ 
margin-left:20px;padding:0; 
} 
</style> 
</head> 
<body> 
<div class="menu"> 
<ul id="with_padding"> 
<li>List</li> 
<li>With</li> 
<li>Default</li> 
<li>Padding,</li> 
<li>No</li> 
<li>Margin</li> 
</ul> 
</div> 
<div class="menu"> 
<ul id="with_margin"> 
<li>List</li> 
<li>With</li> 
<li>Default</li> 
<li>Margin,</li> 
<li>No</li> 
<li>Padding</li> 
</ul> 
</div> 
<div class="menu"> 
<ul id="with_neither"> 
<li>List</li> 
<li>Without</li> 
<li>Padding</li> 
<li>Or</li> 
<li>Margin</li> 
<li>But</li> 
<li>list-style-position:inside;</li> 
</ul> 
</div> 
<div class="menu"> 
<ul id="explicit_padding"> 
<li>List</li> 
<li>With</li> 
<li>Explicit</li> 
<li>20px</li> 
<li>Padding</li> 
</ul> 
</div> 
<div class="menu"> 
<ul id="explicit_margin"> 
<li>List</li> 
<li>With</li> 
<li>Explicit</li> 
<li>20px</li> 
<li>Margin</li> 
</ul> 
</div> 
</body> 
</html>

GoofyDawg

5:25 pm on Mar 9, 2005 (gmt 0)

This is a good article on list rendering that may be helpful.

[meyerweb.com...]

createErrorMsg

5:33 pm on Mar 9, 2005 (gmt 0)

I'll add that you should run the above code (message2) in both FF and IE. The top two lists in the sample code demonstrate how the two browsers handle the space for the marker box.

In FF, the list with default padding but a zeroed margin shows the bullets, whereas the zeroed padding but default margin does not. So FF uses padding to indent the list items.

In IE, the list with default margin but a zeroed padding shows the bullets, whereas the zeroed margin but default padding does not. So IE uses margin to indent the list items.

cEM