带填充的边框不能有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.但是由于填充和边框,您会看到它更大.