是什么让填充仅从某个点水平工作？答案

【问题标题】：What makes padding work horizontally only from a certain point?是什么让填充仅从某个点水平工作？
【发布时间】：2021-12-30 06:56:05
【问题描述】：

以下sn-p中div上的padding仅垂直填充：

.col-sm-2 {
  background: pink;
  padding: 100px;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-2"></div>
  </div>   
</div>

这是因为 Bootstrap 的 .row > * 应用了 padding-left 和 padding-right。

但是，用!important 覆盖填充仅从某个点开始生效（在这种情况下似乎是padding: 45px），因此将其设置为小于那个不能横向工作：

.col-sm-2-a {
  background: pink;
  padding: 30px !important;
}
.col-sm-2-b {
  background: pink;
  padding: 40px !important;
}
.col-sm-2-c {
  background: pink;
  padding: 50px !important;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-sm-2-a"></div>
  </div> 
  <br />
  <div class="row">
    <div class="col-sm-2 col-sm-2-b"></div>
  </div> 
  <br /> 
  <div class="row">
    <div class="col-sm-2 col-sm-2-c"></div>
  </div> 
</div>

这里是动画的：

.col-sm-2 {
  background: pink;
  animation: myanim 10s infinite;
}
@keyframes myanim {
   50% {
      padding: 100px;
   }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-2"></div>
  </div>   
</div>

问题：是什么让填充不在垂直和水平方向都起作用直到某个点，以及从那个点开始发生了什么变化 允许填充水平工作？

【问题讨论】：

第二个宽度受你申请的类的限制。
@Paulie_D，我已经编辑了这个问题，也许你可以看看并帮我弄清楚？

标签： css padding

【解决方案1】：

在sn-p中，行的宽度为540px，因此col-sm-2的宽度为2 / 12 * 540 = 90px。对应规则：

@media (min-width: 576px)
.col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

但我们也有这个规则声明将所有元素的box-sizing 属性设置为border-box：

*, ::after, ::before {
    box-sizing: border-box;
}

box-sizing: border-box;：

元素的尺寸计算为：宽度=边框+ 内容的内边距 + 宽度，高度 = 边框 + 内边距 + 高度内容。

在这个例子中，我们没有边框，只有填充和宽度/高度。 ~16.7% 的宽度将应用于元素的边框。

填充设置为30px，元素的宽度为30 (padding-left) + 30 (padding-right) + the missing pixels to reach 16.7% (30).

设置为45px时，宽度为45 + 45 + 0。

根据documentation：

内容框不能为负数，下限为0，使得不可能使用border-box使元素消失。

这就是为什么使用 50px 的填充，总宽度是 100px (50 + 50 + 0) 而不是 90px (50 + 50 - 10)。

因此，只有当内边距设置为大于45px（更准确地说是padding-left + padding-right > 90px）时，元素的宽度才能超过90px。

【讨论】：

感谢您的详细回答。一件事：最后一段让我很困惑。在这里引用“内容框不能为负数并且降至 0 等”是否相关？毕竟，内容框没有被设置为负数，也没有被设为 0；它是 90（它只是“间隙”像素为 0）。对吗？
@OfirD 我认为解释为什么使用50px 填充，总宽度是100px (50 + 50 + 0) 而不是90px (50 + 50 - 10) 尊重宽度属性设置为16.7%。但你是对的，我可能放错了。
哦，我现在明白你的意思了，明确并提及(50 + 50 - 10) 很有帮助，我建议你也将其插入到你的答案中:)

【解决方案2】：

在您的第一个代码 sn-p 中，您提到 100px 仅垂直填充。然后你在下一个 sn-p 中使用了!important。所以我认为你正在使用重要，因为 100px 填充在第一个代码 sn-p 中没有任何影响。而且您没有故意将引导 css 的链接放在正文中，而不是将其放在您自己的样式标签之前的头部部分。 如果不是这样，请忽略以下建议。
Order where you put CSS rules does matter.如果您将链接放在 head 部分中，在您自己的样式之前，那么 100px 填充将起作用。

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <style>
    .col-sm-2 {
      background: pink;
      padding: 100px;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-2"></div>
    </div>
  </div>
</body>

</html>

至于为什么 45px 是转折点。正如@tom 所建议的那样，该元素的宽度为 90px。当您继续添加填充时，它会占用宽度直到宽度变为 0。之后元素开始增长以适应填充。

<!DOCTYPE html>
<html>

<head>
  <style>
    .one {
      background: pink;
      height: 100px;
      padding: 0px !important;
    }
    
    .two {
      background: wheat;
      height: 100px;
      padding: 46px !important;
    }
  </style>

</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-2 one"></div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-2 two"></div>
    </div>
  </div>

</body>

</html>

第一次潜水的填充为 0，因此它的全宽为 90 像素：

第二个 div 有 46 个填充，因此它没有剩余宽度：

@MRadev 提出了一个很好的建议。您应该尝试坚持使用您正在使用的库/框架/工具包。
以下是 OP 中的第一个代码 sn-p 尝试使用尽可能多的引导类。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <!-- using available bootsrap classes-->
  <div class="container">
    <div class="row">
      <div class="col-sm-2 bg-danger p-5"></div>
    </div>
  </div>
  <!-- extending with specific classes -->
  <style>
    .p-100 {
      padding: 100px !important;
    }
    
    .bg-pink {
      background-color: pink !important;
    }
  </style>
  <div class="container">
    <div class="row">
      <div class="col-sm-2 bg-pink p-100"></div>
    </div>
  </div>

【讨论】：

【解决方案3】：

关于@onkar ruikar 的回答，请记住，当您使用外部库（例如 Bootstrap）时，即使使用 !important 也可能无法覆盖样式规则的优先级。

在许多情况下，此类库会为其元素生成真正特定的规则集。您覆盖它们的选项要么比它们更具体（这并不总是有效），要么像您尝试过的那样使用 !important。

@onkar ruikar 的答案有效的原因 - 将您的样式放在首位是因为当浏览器读取任何给定样式的多个 !important 规则时，他们不知道优先考虑什么他们在第一个之后“放弃”并应用它。

【讨论】：