list-style-type：disc在哪里反映了在ul的li上将margin设置为0px？

Question

考虑一下代码段：

            <ul id= "nav">
                <li>
                    <a href = "#"> Home</a>
                </li>
                <li>
                    <a href = "#"> France</a>
                </li>
                <li>
                    <a href = "#"> Italy</a>
                </li>
                <li>
                    <a href = "#"> Spain</a>
                </li>
                <li>
                    <a href = "#"> Eastern Mediterranean</a>
                </li>
                <li>
                    <a href = "#"> Islands</a>
                </li>
            </ul>

上下文中的 css ：

#nav {
    list-style-type: disc;
    margin: 20px 0 0 0;
    padding: 0;
}

#nav li {
    margin: 10px;    // IF YOU SET IT TO 0, THEN THE CIRCULAR DISC DISSAPPEAR, WHY?
    border: 5px solid #FF0000
}

Answer 1

默认情况下，list-style-position为outside因此，如果您未指定边距或填充，则子弹将隐藏。

您可以将li的边距设置为0px，如果list-style-position为inside，则光盘图片仍会显示。

ul li {
    list-style-position: inside;
}

了解CSS list-style-position Property。

  

list-style-position属性指定列表项标记   应该出现在内容流程的内部或外部。

     

默认值：外部

图片可以帮助您更好地理解：

以下示例JSFiddle没有margin且list-style-position设置为inside，但圆盘仍显示。