关于ol和ul的padding和margin默认值

在《CSS Mastery》一书的第5章中，对于浏览器的默认列表样式处理方式有所描述。作者在书中提到IE和Opera在缩进列表时采用的是margin-left，而Safari和Firefox则选择使用padding-left。通过我个人的实际测试发现，Opera 9版本（我测试的是9.23版本）与Firefox和Safari的处理方式更为一致，它们采用的都是padding-left作为缩进控制。换言之，它们默认的样式表现为：列表的左边缘使用了大约40像素的内边距来产生缩进效果。而与此相反，IE则采用margin-left作为其默认样式，通常缩进为大约30磅的宽度。Opera 8及以下版本是否与IE相同尚未得知，感兴趣的读者可自行测试验证。然而至少有一点是明确的，那就是除了微软以外的浏览器厂商在设计列表缩进时，都倾向于使用padding来控制。这种选择是有道理的。因为缩进是针对每个列表项（item），而非整个列表（list）。想象一下如果设置了ul的背景色为绿色，我们希望整个列表区域都拥有这个背景色，包括其padding部分。如果使用margin来设置缩进，则可能会导致标记部分（即每个列表项前的小圆点或数字序号）与列表主体之间存在明显的边界。因为按照margin的规则，这部分标记可能会悬浮于列表之外。实际上，如果列表获得了布局（layout），你可能会发现标记消失了。因为在IE特有的布局模型中，一旦元素获得布局状态，其呈现方式会变得难以预料。这正是宽度和高度的设置与实际效果之间存在差异的原因。在实际网页开发中，为了更好的兼容性及用户体验的一致性，建议使用统一的margin和padding规则来处理列表的缩进问题。例如，你可以采用以下样式规则： ol, ul { margin-left:0; padding-left:40px; } 这样的处理方式将使得列表在各种浏览器中表现更加一致且符合开发者的预期。另一种方法是针对IE进行特定修复，采用私有前缀的CSS规则来覆盖IE的默认样式行为。同时也有其他开发者指出，在默认情况下，ul标签在Firefox中主要使用padding值进行缩进控制（即padding-left:40px），而在IE中则主要使用margin值进行缩进控制（即margin-left:40px）。为了解决这个问题，可以在全局样式表中定义 ul {margin:0;padding:0;} 来确保所有浏览器中的列表都能得到一致的呈现效果。这种处理方式得到了广泛的支持和推荐。理解浏览器之间的默认样式差异是非常重要的，尤其是在开发跨浏览器的网页时。通过适当的CSS规则设置，我们可以确保网页在各种浏览器中都能呈现出一致且美观的效果。