为什么列表项 (li) 的垂直边距不起作用？

Question

<ul>
<li>List1</li>
</ul>

和简单的CSS:

li {
background-color:pink;
padding:5px;
margin:40px;
}

ul {
list-style-type:none; 
background-color:blue;
}

为什么垂直边距不起作用？页边空白向右/向左有效，但为什么顶部/底部无效"列表项"；应该是块级别的元素，对吧？那么，为什么垂直边距没有得到尊重呢？

高度似乎起作用，但垂直边距不起作用。

然而，如果添加第二个"；李；同级，

<ul>
<li>List1</li>
<li>List2</li>
</ul>

并为两者增加利润，

li {
background-color:pink;
padding:5px;
margin:50px;
}

"；list2"；以及"0"的底部边缘；list1"；坍塌，但创造了无障碍的空间，这意味着他们发挥了作用，然而，"；list2"；，并且"；list1"；仍然不起作用。为什么？

注意：我知道我可以将列表项制作成一个内联块，并且垂直边距会得到尊重，但我的问题是，为什么不尊重它们NOW。

Answer 1

li的Margin正在工作(因为它是块级元素(。问题是——you don't just see it。

* {margin:0; padding: 0;}
ul {
list-style-type:none; 
background-color:blue;
border: 1px solid green;
}
li {
background-color:pink;
margin:40px;
}

<ul>
<li>List1</li>
</ul>