html - 为什么用 CSS "width: x%" 调整图像大小不会改变图像占用的空间？

Question

我在一张桌子旁边有一张图片和一些文字。HTML 如下所示：

  <table>
    <tr>
      <td>
        <img src="b.png" alt="B" class="the-b">
      </td>
      <td>
        <h1>WHY</h1>
        <h2></h2>
        <p>BUT WHY THOUGH</p>
      </td>
    </tr>
  </table>

除了黄色背景之外，图像上没有任何样式，表格中的文本位于图像旁边，如下所示：没有调整大小

但是，如果我将此 CSS 添加到图像中，则图像和文本之间会有很大的空白：

.the-b {
  width: 10%;
  height: auto;
}

请参阅调整大小。

即使我将填充和边距更改为 0，它也保持不变。看起来无论图像大小，它都占用了相同数量的空间，即使背景颜色仅限于可见图像。

如果我使用尺寸较小的图像，文本会靠在它上面，直到我调整它的大小，所以我知道它不是一些表格默认大小。但是，如果我只是将文本放在图像旁边，调整大小的空白问题就会消失，所以它必须是表格与 CSS 宽度的组合：x%。

是什么创造了这个空白？CSS图像调整大小以这种方式保持原始图像大小空间是否正常（如果发生这种情况）？

标签： htmlcsswhitespacespacing