带填充的边框不能有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;关于border-box的所有内容，由于宽度和高度均为零，填充/边框位于零宽度和高度之内，因此不应显示任何内容。

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

Answer 1

根据spec，

  

通过减去边框来计算内容宽度和高度   和指定width的相应边的填充宽度   和height属性。作为内容宽度和高度cannot be negative（[CSS21]，第10.2节），此计算的内容为0。

因此，你的元素有效地具有高度和宽度0.但是你会看到它因填充和边框而变大。