当 span 的高度和宽度为 0 且仅 padding-left 设置为 20px 时，padding 仍然存在

这是我的设置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
span {
  padding-left: 25px;
  background: red;
}

<span></span>

我有设置为的跨度标签box-sizing:border-box and padding-left:25px。当这个span标签中没有任何值时，它的height and width are 0。所以我希望span标签不会显示在网页上。但是，它仍然存在，我认为这是因为 padding-left 的原因。但我只设置了padding-left所以它仍然没有高度可显示。但是正如你在jsfiddle中看到的，padding显示在网页上......

为什么会发生这种情况？

The box-sizing仅限财产适用于接受宽度或高度的元素 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。默认情况下，一个span元素是不可替换的内联元素，这意味着width属性不适用于它，因此box-sizing属性也不适用于它。

作为参考，这里是有关哪些元素的规范的相关链接box-sizing财产适用于：

3. 盒模型添加 - 3.1。盒子大小属性 https://www.w3.org/TR/css-ui-3/#propdef-box-sizing

适用于：所有接受的元素width or height

以下是有关该规范的相关报价和链接width属性和非替换内联元素：

10.2 内容宽度：'width'属性 https://www.w3.org/TR/CSS21/visudet.html#the-width-property

此属性 [width] 不适用于非替换的内联元素。未替换内联元素框的内容宽度是其中渲染内容的宽度（在子元素的任何相对偏移之前）。回想一下，内联框流入行框。行盒的宽度由其包含块给出，但可能会因浮动的存在而缩短。

因此，如果您更改display的财产span元素到inline-block or block，那么该元素将不会出现（正如您所期望的那样）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
span {
  padding-left: 25px;
  display: inline-block;
  background: #f00;
}

<span></span>