html - 标签的空间不适合它的内容，如 标签

Question

这是代码

<a href="#" style="background-color:red; padding:30px;">
<img src="cat.jpg" style="width:150px; vertical-align:bottom;"/></a>

这段代码会产生下图

我只是想知道为什么 anchor 标记不会增加其大小以适合图像。如您所见，图像溢出。我知道如果我有“display:inline-block”，我会解决这个问题，但我想知道为什么会这样，因为当你在 anchor 标签内有文本时，该区域将根据其内容增长，如下图所示

Answer 1

您可以设置 <a>标记为 { display: block; }