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

Question

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>

带边框 - 带填充和边框

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

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

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

Maybe sometimes box-sizing:border-box' it doesn't work properly?

html

css

border

padding

演示：