box-sizing：宽度＆lt; border-box;填充

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定义了元素的“整体宽度”。但是，如果宽度小于填充+边界宽度的总和，则会发生奇怪的事情：

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表现得如预期的那样，跨度似乎显示“＆lt; free space＆gt;”中的所有“左”，输入显示所有内容（并且只有0px“＆lt; free space＆gt;”）。

是什么解释了这种行为？

编辑： span{display:block}使得跨度表现为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

如果您为元素添加高度，您将看到它们都是相同的。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃34;元素＆＃34;本身是0宽度，由蓝框显示

两侧填充为10px

边界是双方5px

导致总的盒子尺寸宽度为30px