css - 带内边距的边框不能为 0 宽度

Question

考虑这段代码

div {
  box-sizing: border-box;
  
  width: 0;
  height: 0;    
  max-width: 0;
  max-height: 0;
  
  border: 1px solid gray;
  padding: 12px;
  overflow: hidden;
}

<div>Hi</div>

根据我读过、理解和使用过的所有内容，box-sizing: border-box;这应该什么都不显示，因为宽度和高度为零，而填充/边框在零宽度和高度之内。

然而，我们看到的是一个 26x26 的框（（12 填充 + 1 边框）*2）。是什么赋予了？为什么border-box不在这里工作？

Answer 1

根据规范，

内容的宽度和高度是通过从指定的宽度 和高度属性中减去相应边的边框和填充宽度来计算的。由于内容的宽度和高度不能为负数（[CSS21]，第 10.2 节），因此该计算以 0 为底。

因此，您的元素实际上具有 0 的高度和宽度。但是由于填充和边框，您会看到它更大。