带填充的边框框宽度不能为 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>

根据我曾经 read, understood, and used 关于 box-sizing: border-box; 的所有内容，这应该不会显示任何内容，因为宽度和高度为零并且 padding/border 在零宽度和高度内。

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

Answer 1

根据spec,

The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

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

带填充的边框框宽度不能为 0

border-box with padding can't have 0 width

css

border-box