为什么 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 块实际上是 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.

Answer 2

是因为ul有一个默认的padding-left（40px），你把它设为0，你可以看到右边的38px，因为position:relative;right:38px .

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

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>

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

Why is CSS 'padding' creating a margin in my element?

css

margin

padding