html - 盒子尺寸 :border-box with width < padding

Question

据我了解box-sizing , box-sizing:border-box 使得

width = border-left-width + padding-left + <free space> + padding-right + border-right-width

至少，这正是我设置时会发生的情况

div {
  box-sizing: border-box;
  width: 200px;
  border-left: 5px solid green;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 5px solid green;
  background: #ebebeb;
}

<div>170px free space</div>

因此，根据我的理解，width 定义了元素的“总宽度”。但是，如果宽度小于 paddings+border-widths 的总和，就会发生奇怪的事情:

div, span, input {
  box-sizing: border-box;
  width: 0; /* <= */
  border-top: none;
  border-bottom: none;
  border-left: 5px solid green;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 5px solid green;
  background: #ebebeb;
}

<div></div>
<br>
<span></span>
<br>
<input>

Divs 的行为符合预期，跨度似乎显示了“ ”“左侧”的所有内容，输入显示了所有内容(并且只有 0px“ ”)。

如何解释这种行为？

---

编辑: span{display:block} 使 span 的行为与 div 相同，这至少使其更易于理解。但是 input{display:block} 没有同样的效果。为什么？

div, span, input {
  box-sizing: border-box;
  width: 0;
  display: block; /* <= */
  border-top: none;
  border-bottom: none;
  border-left: 5px solid green;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 5px solid green;
  background: #ebebeb;
}

<div></div>
<br>
<span></span>
<br>
<input>

Answer 1

如果您为元素添加高度，您会发现它们都是一样的。

div, span, input {
  display: block;
  box-sizing: border-box;
  width: 0;
  padding: 0 10px;
  border: solid green;
  border-width: 0 5px 0 5px;
  background: #ebebeb;
  height: 20px;
}

<div></div>
<br>
<span></span>
<br>
<input>

“元素”本身的宽度为0，由蓝色框显示

padding 两边都是10px

边框两边都是5px

导致 box-sizing 的总宽度为 30px