也许有时 box-sizing:border-box' 它不能正常工作？答案

【问题标题】：Maybe sometimes box-sizing:border-box' it doesn't work properly?也许有时 box-sizing:border-box' 它不能正常工作？
【发布时间】：2021-01-28 12:04:55
【问题描述】：

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  height: 100px;
  width: 500px;
  padding: 20px;
  border: 40px solid black;
  background-color: blue;
}

<div class="box">
   With border-box - with padding & border
</div>

带边框 - 带内边距和边框

为什么在上面的示例中只从顶部和左侧应用填充？

【问题讨论】：

将 overflow:auto 添加到您的元素中，您就会明白。 Thep add is there 但溢出了

标签： html css border padding

【解决方案1】：

再次明确：box-sizing: border-box; 使框包含边框到块的宽度和高度计算中。

它不应用 padding-bottom 因为你设置了height: 100px的框

但接下来您将设置 40 像素的边框和 20 像素的填充。因此，如果您考虑它达到：40px + 40px + 20px + 20px = 120px 仅用于填充和边框。

所以这超出了您设置的块高度 120px > 100px。所以 html 尽量根据你所说的做到最好。

我建议如下：

.box {
  min-height: 100px;
  height: auto;
}

演示：

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  min-height: 100px;
  height: auto;
  width: 500px;
  padding: 20px;
  border: 40px solid black;
  background-color: blue;
}

<div class="box">
   With border-box - with padding & border
</div>

【讨论】：

是的，没错。谢谢。为什么不能从底部而不是顶部应用填充
因为看到的 pdding 首先是左上角。因为块总是向下或向右推。这是它的正常行为。你的文字实际上是尽可能地适应盒子。因为如果你认为它应该向下推。但由于它是边框，因此您的文本会被推回“正常”框大小。我想你有你的答案。
@MostafaFotouhi 如果你想看到最好的实现你正在做的事情，我添加了一个演示