为什么CSS'padding'在我的元素中创建了一个边距？

Question

我有一个宽度为100％的'ul'，但当我在其中加上'padding'时，会出现一个右边距。为什么会这样？代码如下。

nav ul {
  list-style: none;
  text-align: center;
  background-color: rgb(90, 32, 102);
  line-height: 3.125em;
  position: relative;
  right: 38px;
  width: 100%;
  padding: 1em 0;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

使用position: relative和right: 38px在这里不是惯用的。它是说将ul元素的右边缘移动到38px通常所在的左边，创建一个右边距。最好的第一步可能是删除这两个属性。

看起来你想要一个没有项目符号的居中列表，这就是结果。 ul缩进设置为padding，左侧已设置为0。

起初，我误解了这个问题，认为李元素过于宽泛地破坏了风格。给出的建议被接受了，所以我认为如果不是答案那么它会有所帮助。

默认情况下，填充超出了元素的宽度，所以你的ul块实际上是100% + 1em高。

使用css的box-sizing属性来应用box-sizing: border-box;会产生预期的行为。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

border-box width和height属性包括内容，填充和边框，但不包括边距。请注意，填充和边框将位于框内。例如，.box {width：350px; border：10px solid black;}渲染一个350px宽的盒子。内容框不能为负数并且会被置于0，从而无法使用边框来使元素消失。

Answer 2

这是因为ul有一个默认的padding-left（40px）你等于0，你可以看到由于38px在右边的position:relative;right:38px。

请注意，width:100%也是罪魁祸首，因为添加了默认填充，您将有溢出，因此将元素向左推（使用right:38px）不足以看到空白空间：

nav ul {
  list-style: none;
  text-align: center;
  background-color: rgb(90, 32, 102);
  line-height: 3.125em;
  position: relative;
  right: 38px;
  width: 100%;
}

nav {
  width:80%;
  margin:auto;
  border:1px solid;
}

width 100% + default padding creating an overflow
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
width is now auto, so no more overflow and we see the 38px
<nav>
  <ul style="width:auto">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
padding is now 0, so no more overflow and we see the 38px
<nav>
  <ul style="padding:1em 0">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>