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

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

问题是 CSS 设置*{padding: 0; margin: 0;}我现在正在删除它，每个克里斯·科伊尔的笔记，是“不再酷”。

为什么padding: 0导致无序列表“标记”的显示消失？

See 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")
}

With list-style-position: outside，列表标记放置在列表项框的外部。无序列表元素本身的填充会偏移列表项，以便可以看到标记。这通常作为浏览器默认值、非零值来实现padding-left。将填充清零会导致包含文本内容的列表项框本身与无序列表框对齐，从而隐藏列表标记。