<a>標簽</a>的空間<a>不適合其內容，例如</a> <a><img></a> <a>標簽</a>

Question

這是代碼

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

此代碼將導致下圖

我只是想知道為什么錨標記不會增大其大小以適合圖像。 如您所見，圖像溢出。 我了解如果我具有“ display：inline-block”，我將解決此問題，但是我想知道為什么會發生這種情況，因為當錨標記中包含文本時，該區域將根據其內容而增長，如下圖所示

Answer 1

您可以將<a>標記設置為{ display: block; } { display: block; }

Answer 2

a底部的空間是img的行高

a img {
  line-height: 0;
}

或者您也可以設置img display：block，如果顯示塊也是如此