设置图像width：0隐藏它，而width：0％也使它占据空间。 [英] Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too

问题描述

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

The image inside the container element having a specific display type behaves differently when using the img { width: 0; } or img { width: 0%; } style rules.

使用任何单位增加 width 的值除了 ％给出了相同的预期结果（（ img 仅占据

Increasing the value of width using any unit other than % gave the same expected result (img occupies only the shown part of it).

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

I've tried changing the display type of the container the img is in. The result is shown below.

容器显示类型，其中显示与预期不同的 img ：

Container display types in which the img is shown not as expected:

1. -webkit-inline-box


2. inline-block


3. inline-flex


4. inline-grid


5. inline-table


6. table


7. table-单元格


8. 表行


9. 表行组


10. 表头组
>

11. table-footer-group

1. -webkit-inline-box
2. inline-block
3. inline-flex
4. inline-grid
5. inline-table
6. table
7. table-cell
8. table-row
9. table-row-group
10. table-header-group
11. table-footer-group

不确定它们之间的关系，可能是我m缺少某些东西。

Not sure how they're related to each other, probably I'm missing something.

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://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>


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

<button>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>

img {宽度：0％; } 应该可以像 img一样工作{width：0; } 而不占用任何空间，在这里不是这种情况。

The img { width: 0%; } should work as it was img { width: 0; } without occupying any space, which isn't the case here.

推荐答案

如@Talmid所说在他的答案中，我们面临一个复杂的计算，并且使用 width：0 和 width：0％是不一样的

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

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

The first one is an absolute value (a length) that the browser can resolve without the need of any reference but the second one is a percentage value that is relative to the width of the containing block so the browser need to know the width of the containing block first to resolve it. (it will not do the effort to conclude that 0% will be the same as 0)

此问题将发生在我们所有具有缩小以适应行为（浮动，内联块等）的元素上

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

这里有更多示例：

img {
  width: 30%;
}

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

<span>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</span>

<span style="float:left;">
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</span>

非图像也可能发生元素：

This can also happen with non-image elements:

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属性上定义的百分比值）。从逻辑上讲，包含块的尺寸将由其内容（收缩配合行为）定义。之后，我们可以根据先前计算的宽度来解析百分比值，因此子元素将缩小。

Basically, the browser will first define the dimension of the containing block (at this step we don't consider the percentage value defined on the width property of the child element). Logically the dimension of the containing block will be defined by its content (the shrink-to-fit behavior). After that we are able to resolve the percentage value based of the width calculated previously thus the child element will shrink.

当然，我们不会再回来计算包含块的宽度了。

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

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

In case the child element uses a non-percentage value (a length), the browser will consider it first when defining the width of the containing block since it's not a relative value but an absolute one:

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

Here is the relevant part of the specification detailing this: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

另一个与此相关的问题：当孩子取决于父母，而父母取决于孩子时，浏览器如何计算宽度

Another related question dealing with the same: How do browsers calculate width when child depends on parent, and parent's depends on child's

这篇关于设置图像width：0隐藏它，而width：0％也使它占据空间。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！