时间戳

首页 > 解决方案 > 为什么 CSS 'padding' 在我的元素中创建边距？

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

问题描述

我有一个宽度为 100% 的“ul”，但是当我在其中放入“填充”时，会出现右边距。为什么会这样？代码如下。

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>

标签： cssmarginpadding

解决方案

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

似乎您想要一个没有项目符号的居中列表，这就是结果。ul 缩进用padding设置，左边已经设置为 0。

起初，我误读了这个问题，认为 li 元素因太宽而破坏了风格。给出的建议被接受了，所以我认为如果不是答案，它会很有帮助。

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

使用box-sizingcss 的属性来应用box-sizing: border-box;将创建预期的行为。

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

border-box 宽度和高度属性包括内容、填充和边框，但不包括边距。请注意，填充和边框将在框内。例如，.box {width: 350px; border: 10px solid black;} 渲染一个 350px 宽的盒子。内容框不能为负数，下限为0，无法使用border-box使元素消失。

推荐阅读