当 span 的高度和宽度为 0 且仅 padding-left 设置为 20px 时，padding 仍然存在 [英] padding still exists when height and width of span are 0 with only padding-left set to 20px

问题描述

这是我的设置:

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

<span></span>

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

I have span tag with settings of box-sizing:border-box and padding-left:25px. When this span tag does not have any values in it, its height and width are 0. So I expect the span tag not to display on the web page. However, It is still there, I think it is because of the padding-left. But I only set the padding-left so it still does not have height to display. But as you can see in jsfiddle, the padding displays on the webpage......

为什么会这样?

推荐答案

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

The box-sizing property only applies to elements that accept a width or height. By default, a span element is a non-replaced inline element, which means that the width property doesn't apply to it, thus the box-sizing property doesn't apply to it either.

作为参考，这里是关于 box-sizing 属性适用于哪些元素的规范的相关链接:

For reference, here is a relevant link to the specification regarding which elements the box-sizing property applies to:

3.盒模型添加 - 3.1.box-sizing 属性

适用于:所有接受 width 或 height

Applies to: all elements that accept width or height

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

Here is the relevant quote and link to the specification regarding the width property and non-replaced inline elements:

10.2 内容宽度:宽度"财产

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

This property [width] does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

因此，如果您将 span 元素的 display 属性更改为 inline-block 或 block，那么该元素将不会出现(正如您所期望的那样):

Therefore, if you change the display property of the span element to inline-block or block, then the element won't appear (as you seem to be expecting):

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

<span></span>

这篇关于当 span 的高度和宽度为 0 且仅 padding-left 设置为 20px 时，padding 仍然存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！