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

考虑这段代码

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>

根据我所经历过的一切阅读、理解和使用 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing about box-sizing: border-box;这应该不显示任何内容，因为宽度和高度为零，并且填充/边框位于零宽度和高度之内。

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

根据spec http://www.w3.org/TR/2015/WD-css3-ui-20150224/#box-sizing,

内容的宽度和高度是通过减去边框来计算的 以及指定的各边的填充宽度width http://dev.w3.org/csswg/css2/visudet.html#propdef-width and height http://dev.w3.org/csswg/css2/visudet.html#propdef-height特性。随着内容的宽度和高度不可能是 消极的 http://www.w3.org/TR/CSS21/visudet.html#the-width-property（[CSS21]，第 10.2 节），此计算下限为 0。

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