为什么包含图像的 HTML 按钮这么宽？

Question

我们 8 岁的儿子写了以下 HTML 代码：

<button>
        <img src='https://i.stack.imgur.com/IEMUv.png' height=7% width=7% >
</button>

他很不高兴，因为按钮太宽了：

他要我解释为什么按钮这么宽，但我不能。谁能帮我解释一下？

Answer 1

当您将图片的宽度设置为百分比时，button 保持图片的原始宽度，只是图片缩小 7%。

您可以通过设置图片的绝对宽度来避免它。

<button>
  <img src='https://i.stack.imgur.com/IEMUv.png' width="25">
</button>

Answer 2

这是事情变得有点循环的地方。按钮元素的宽度由图像的尺寸设置。然后图像元素的样式设置为按钮的百分比 而不是 实际图像本身。

使用绝对单位 (px) 而不是 %

button img {
  height: 46px;
  width: 46px;
}

<button>
        <img src='https://i.stack.imgur.com/IEMUv.png' >
</button>

Why is HTML button containing image so wide?