css - 为什么 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。

起初，我误读了这个问题，认为 li 元素太宽而破坏了样式。所提供的建议已被接受，因此我认为即使不是答案也会有所帮助。

默认情况下，填充超出元素的宽度，因此您的 ul block 实际上是 100% + 1em 高。

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

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

border-box The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.