A imagem dentro do elemento contêiner com um @ específidisplay tipobehaves diferentemente ao usar oimg { width: 0; } ouimg { width: 0%; }egras de estil

Aumento do valor dewidth usandoqualquer unidade que não seja % deu o mesmo resultado esperado (img ocupa apenas a parte mostrada

Tentei mudar odisplay tipo do contêinerimg está dentro. O resultado é mostrado abaixo.

Containerdisplay tipos nos quais oimg é mostradoNão como esperad:

-webkit-inline-box bloco inline inline-flex grade em linha tabela em linhatabel célula da tabelalinha da tabel grupo de linhas da tabela grupo-cabeçalho-da-tabela grupo-rodapé-da-tabela

Não tenho certeza de como eles estão relacionados, provavelmente estou perdendo alguma coisa.

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>

Oimg { width: 0%; } deve funcionar como estavaimg { width: 0; } sem ocupar espaço, o que não é o caso aqui.