复制:如何添加页边距，以李项

Question

我有一个无序的列表，我将样式设置为none，这将创建默认缩进的空间。

我对边距和填充的理解是边距是元素的外层空间，因此我试图使用margin: 0来修复间隙，但它不起作用。当我使用padding: 0时，它从li项中删除了缩进的空间。

现在我很困惑为什么在这种情况下填充而不是边距。

ul {
  list-style-type: none;
  padding: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

Answer 1

浏览器的默认设置是在ui中添加一些填充，而不是边距。所以使用padding: 0px会覆盖浏览器的默认值。

看看右边的Computed选项卡，它显示了浏览器样式列表padding-left: 40px;

ul.no-padding {
  list-style-type: none;
  padding: 0px;
}

ul.no-margin {
  list-style-type: none;
  margin: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-margin">
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-padding">
  <li>
    Linkedin
  </li>
</ul>