设置图像“width: 0”将其隐藏，而“width: 0%”也会使其占据 space

Question

具有特定 display 类型的容器元素内的图像 在使用 img { width: 0; } 或 img { width: 0%; } 样式规则时表现不同。

使用除%以外的任何单位增加width的值得到了相同的预期结果（ img只占显示的部分）。

我已经尝试更改 img 所在容器的 display 类型。结果如下所示。

显示 img 的容器 display 类型 与预期不符：

-webkit-inline-box
inline-block
inline-flex
inline-grid
inline-table
table
table-cell
table-row
table-row-群
table-header-group
table-footer-group

不确定它们之间的关系，可能我遗漏了什么。

button:first-of-type img {
  width: 0;
}

button:last-of-type img {
  width: 0%;
}

<h3>The image width: 0 (hides it)</h3>

<button>
      <img src="https://picsum.photos/id/1012/200/100">
      <p>Add playlist</p>
</button>


<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>

<button>
      <img src="https://picsum.photos/id/1012/200/100">
      <p>Add playlist</p>
</button>

img { width: 0%; } 应该像 img { width: 0; } 一样工作而不占用任何 space，这里不是这种情况。

Answer 1

容器的宽度由 img 宽度决定，它是容器宽度的百分比，由 img 宽度决定，它...（循环引用）。

当指定 img 的百分比宽度时，浏览器通过将容器宽度设置为图像的预缩放宽度来解决此问题。

尽管 0% 的特殊情况似乎可以像 0px 一样处理，但也许不是为了与其他指定百分比值的行为一致。

Answer 2

正如@Talmid 在他的回答中所说，我们面临着复杂的计算，使用 width:0 和 width:0% 是不一样的。

第一个是绝对值（长度），浏览器无需任何引用即可解析，第二个是相对于包含块宽度的百分比值，因此浏览器需要首先知道包含块的宽度来解决它。 （不会努力得出 0% 与 0 相同的结论）

这个问题会发生在我们有收缩到适合行为的所有元素（浮动、内联块等）

这里有更多例子：

img {
  width: 30%;
}

span {
  border: 1px solid;
  display: inline-block;
}

<span>
      <img src="https://picsum.photos/id/1012/200/100">
</span>

<span style="float:left;">
      <img src="https://picsum.photos/id/1012/200/100">
</span>

非图像元素也可能发生这种情况：

span  {
  display:inline-block;
  border:1px solid red;
}

<div style="float:left;border: 1px solid;">
      <span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:30%;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:0%;">some text</span>
</div>

基本上，浏览器会先定义包含块的尺寸（这一步我们不考虑定义在子元素宽度属性上的百分比值）。从逻辑上讲，包含块的尺寸将由其内容定义（收缩以适合行为）。之后我们就可以根据之前计算出的宽度来解析百分比值，这样子元素就会收缩。

当然我们不会再回来计算包含块的宽度，因为我们将有一个无休止的循环（一个循环）。

如果子元素使用非百分比值（长度），浏览器将在定义包含块的宽度时首先考虑它，因为它不是相对值而是绝对值：

span  {
  display:inline-block;
  border:1px solid red;
}

<div style="float:left;border: 1px solid;">
      <span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:30px;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:0;">some text</span>
</div>

以下是详细说明的规范的相关部分：https://www.w3.org/TR/css-sizing-3/#percentage-sizing

另一个处理相同问题的相关问题：

设置图像“width: 0”将其隐藏，而“width: 0%”也会使其占据 space

Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too

html

css

image

display