The output I got

在try 一些css属性时,我注意到margin-topitem A上不起作用.以下是我用于测试的代码:

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 */
}
<ul>
  <li>item A</li>
  <li>item B</li>
  <li>item C</li>
  <li>item D</li>
  <li>item E</li>
</ul>

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?

推荐答案

Proof that the margin is there

正在应用边距IS.然而,它是不可见的,因为它的ul折叠了边距.您可以将padding-top应用于ul元素,边距不会折叠.

ul {
  background-color : #295580;
  width            : 190px;
  border-radius    : 6px;
  padding-top      : 0.1px;
}

Html相关问答推荐

创建具有圆锥渐变的水平CSS聚光灯

为什么在添加文本时网格区域会调整大小?

不能以Angular 更改输入的S边框 colored颜色

IFRAME中的Chrome图像未调整大小

Style=背景图像URL引用变成&;Quot;

如何生成随机字符串的字母数字字符集长度到html跨度?

如何使用*ngFor将模板从父级传递到子级

使自定义图像滑块全宽

目标第一个祖先标签的 XPath

CSS中的百分比高度,如何使其与父级高度相同

无法在 CSS 中将 h1 标签居中

如何使Bootstrap 5卡可点击

为什么 text-align 应用于 span 而不是 CSS 中的 img

提交前的验证表单未显示任何验证消息?

让 Iframe 覆盖整个页面

如何创建带有偏移边框线的双色边框?

svg 内容超过元素

文本输入在 Chrome 中保持水平滚动,带有文本溢出:省略号

禁用的 Select 标签没有在 chrome 上的 css 中指定的 colored颜色

用 flexbox 和 overflow 覆盖