小编Luk*_*kas的帖子

设置图像“width: 0”会隐藏它,而“width: 0%”也会让它占据空间

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

width增加使用除给出相同预期结果之外的任何单位 的值(仅占据显示的部分)。%img


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

显示不符合预期的容器display类型:img

  1. -webkit-内联框
  2. 内联块
  3. 内联柔性
  4. 内联网格
  5. 内联表
  6. 桌子
  7. 表格单元格
  8. 表格行
  9. 表行组
  10. 表头组
  11. 表格页脚组

不确定它们之间的关系,可能我错过了一些东西。


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)

html css image display

5
推荐指数
1
解决办法
2498
查看次数

标签 统计

css ×1

display ×1

html ×1

image ×1