使用或样式规则时,具有特定display类型的容器元素内的图像的行为有所不同。img { width: 0; }img { width: 0%; }
width增加使用除给出相同预期结果之外的任何单位 的值(仅占据显示的部分)。%img
我尝试更改display容器img所在的类型。结果如下所示。
显示不符合预期的容器display类型:img
不确定它们之间的关系,可能我错过了一些东西。
button:first-of-type img {
width: 0;
}
button:last-of-type img {
width: 0%;
}Run Code Online (Sandbox Code Playgroud)
<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 …Run Code Online (Sandbox Code Playgroud)