Question

这是我的设置：

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

<span></span>

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

为什么会这样？

Answer 1

仅box-sizing属性applies to elements that accept a width or height。默认情况下，span元素是未替换的内联元素，这意味着width属性不适用于它，因此box-sizing属性不适用适用于它。

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

3. Box Model addition - 3.1. box-sizing property

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

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

10.2 Content width: the 'width' property

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

因此，如果您将display元素的span属性更改为inline-block或block，则该元素不会出现（因为您似乎期待）：

＆＃13;

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

＆＃13;

<span></span>

＆＃13;

Answer 2

使范围display:block或inline-block将删除额外的空间。

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

2 个答案: