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

Question

这是我的设置：

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

<span></span>

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

为什么会发生这种情况？

Answer 1

该box-sizing属性仅适用于接受 width 或 height 的元素。默认情况下，span元素是不可替换的内联元素，这意味着该width属性不适用于它，因此该box-sizing属性也不适用于它。

作为参考，以下是有关属性适用于哪些元素的规范的相关链接box-sizing：

3. 盒模型添加 - 3.1。盒子大小属性

适用于：所有接受width或height

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

10.2 内容宽度：'width'属性

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

因此，如果将元素display的属性更改span为inline-blockor block，则该元素将不会出现（正如您所期望的那样）：

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

<span></span>