英文:
margin-top is not being applied on the first item of unordered list
问题
以下是您要翻译的内容：
我得到的输出
在尝试一些CSS属性时，我注意到margin-top不起作用于item A。以下是我用于测试的代码：
ul {
background-color : #295580;
width : 190px;
border-radius : 6px;
}
ul>li {
background-color : #d9e8f7;
margin-top : 20px; /* 尝试在每个 <li> 项目上应用 margin-top */
}
<ul>
<li>item A</li>
<li>item B</li>
<li>item C</li>
<li>item D</li>
<li>item E</li>
</ul>
实际上，我试图在每个<li>子元素上添加顶部间距。
所以我的问题是，为什么margin-top被应用于所有项目（即从项目B到项目E），除了item A？是因为margin collapse还是还有其他原因？
英文:
The output I got
While trying out some CSS properties, I've observed that margin-top wasn't working on item A. Below is the code I've used for testing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
ul {
background-color : #295580;
width : 190px;
border-radius : 6px;
}
ul>li {
background-color : #d9e8f7;
margin-top : 20px; /*/ Tried to apply margin-top on each <li> item */
}
<!-- language: lang-html -->
<ul>
<li>item A</li>
<li>item B</li>
<li>item C</li>
<li>item D</li>
<li>item E</li>
</ul>
<!-- end snippet -->
Actually I was trying to add margin on top of each <li> child.
So my question is why margin-top is being applied to all items(i.e. From item B to item E) except item A? Is it because of margin collapse or is there another reason behind it?
答案1
得分: 2
[![证明边距存在][1]][1]
边距**已经**被应用。但是，由于`ul`元素折叠了边距，因此不可见。您可以对`ul`元素应用`padding-top`，边距就不会折叠。
```lang-css
ul {
background-color : #295580;
width : 190px;
border-radius : 6px;
padding-top : 0.1px;
}
<details>
<summary>英文:</summary>
[![Proof that the margin is there][1]][1]
The margin **IS** being applied. However, it is not visible since it the `ul` collapses the margin. You can apply `padding-top` to the `ul` element and the margin will not collapse.
```lang-css
ul {
background-color : #295580;
width : 190px;
border-radius : 6px;
padding-top : 0.1px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论