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

60
January 03, 2019, at 08:50 AM

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.

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

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

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-cell
  8. table-row
  9. table-row-group
  10. table-header-group
  11. table-footer-group

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>

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

Answer 1

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

The first one is a fixed 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)

Here is more examples:

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>

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. Then 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>

Answer 2

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

READ ALSO
Differences between HashMap and Hashtable?

Differences between HashMap and Hashtable?

What are the differences between a HashMap and a Hashtable in Java?

23
Java regex not capturing group

Java regex not capturing group

I am applying a regex to the following string:

62
Setting value to a variable in RESTful Web Service URI

Setting value to a variable in RESTful Web Service URI

I am wondering if there is a way to put a variable in the path of a RESTful Web Service using GlassFish 41, in order to let the user set the value of that variable

62
Harism animation by clicking

Harism animation by clicking

I found the good harism's project that allows a beautiful paging effect like following link https://githubcom/harism/android_page_curl

26