为什么 padding: 0 会隐藏我的无序列表项目符号？

Question

我正在更新一个旧网站，其中有很多无序列表。每当 padding 设置为 0 时，无序列表的显示“标记”就会消失。

问题是 CSS 设置

*{padding: 0; margin: 0;}

，我现在正在删除它，根据 Chris Coyier 的笔记，它“不再酷”。

为什么

padding: 0

会导致无序列表“标记”的显示消失？

参见jsfiddle

<div> List of Stuff:
    <ul class="circle" >
         <li>Apples</li>
         <li>Bumblebees </li>
         <li>Cats</li>
         <li>Dogs</li>
    </ul>
</div>

CSS：

ul {
    list-style-type: none;
    list-style-position: outside;
    padding: 0;    
    margin: 0px; 
}

ul li {
     background-repeat: no-repeat; 
     background-position: 0px center; 
     padding-left: 15px; 
}

ul.disc{
    list-style-type: disc;
}

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

ul.gray_quad li{
    list-style-image: url("./includes/images/gray_quad.gif")
}

ul.yellow_quad li{
    list-style-image: url("./includes/images/yellow_quad.gif")
}

Answer 1

使用

list-style-position: outside

，列表标记将放置在列表项框的外部。无序列表元素本身的填充会偏移列表项，以便可以看到标记。这通常作为浏览器默认值、

padding-left

的非零值来实现。将填充清零会导致包含文本内容的列表项框本身与无序列表框对齐，从而隐藏列表标记。