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

Question

以下代码段中 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>

问题：是什么使得填充不能在垂直和水平方向都起作用直到某个点，以及从那个点 允许填充水平工作的变化是什么？

Answer 1

在代码片段中，行的宽度为 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; :

The dimensions of the elements are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content.

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

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

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

根据 documentation :

The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

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

因此，仅当 padding 设置为大于 45px 时（更准确地说，如果 padding-left + padding-right > 90px），元素的宽度可以超过 90px。

Answer 2

在您的第一个代码片段中，您提到 100px 只能垂直填充。然后你在下一个片段中使用了 !important 。所以我认为您使用的是 important，因为 100px 填充在第一个代码片段中没有任何效果。而且您没有故意将 link 到 bootstrap css 放在正文中，而是将其放在您自己的样式标签之前的头部部分。 如果不是这种情况，请忽略以下建议。
Order where you put CSS rules does matter。如果你把 links 放在 head 部分，在你自己的样式之前，那么 100px padding 就可以了。

<!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>

第一个 dive 的内边距为 0，因此它的全宽为 90px：

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

@MRadev 提出了一个很好的建议。你应该尽量坚持你正在使用的library/framework/toolkit。
以下是 OP 中相同的第一个代码片段，尝试使用尽可能多的 bootstrap 类。

<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>

此讨论将帮助您添加更多间距选项：
https://getbootstrap.com/docs/4.6/utilities/spacing/
https://getbootstrap.com/docs/4.6/utilities/colors/

Answer 3

关于@onkar ruikar 的回答，请记住，当您在您的情况下使用外部库（例如 Bootstrap 时，即使使用 [=17=，样式覆盖也可能不起作用]!important 由于规则的优先级。

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

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

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

What makes padding work horizontally only from a certain point?

css

padding