设置图像 `width: 0` 隐藏它，而 `width: 0%` 使它也占据空间

Question

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

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

---

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

img 显示的容器display 类型不像预期的那样：

1. -webkit-inline-box
2. 内联块
3. 内联-flex
4. 内嵌网格
5. 内联表
6. 表格
7. 表格单元格
8. 表格行
9. 表行组
10. 表头组
11. 表格页脚组

不确定它们是如何相互关联的，可能我遗漏了一些东西。

---

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; } 一样工作而不占用任何空间，但这里不是这种情况。

Answer 1

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

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

这个问题会发生在我们有 shrink-to-fit 行为的所有元素（浮动、内联块等）

这里有更多例子：

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>

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

当然，我们不会再返回计算包含块的宽度，因为我们将有一个非结束循环（一个循环）。

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

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

处理相同的另一个相关问题：How do browsers calculate width when child depends on parent, and parent's depends on child's

Answer 2

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

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

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