[英]the space of <a> tag does not fit into its content like <img> tag
Here is code 这是代码
<a href="#" style="background-color:red; padding:30px;">
<img src="cat.jpg" style="width:150px; vertical-align:bottom;"/></a>
This code would result in the following picture 此代码将导致下图
I am just wondering why the anchor tag does not grow its size to fit into the image.
我只是想知道为什么锚标记不会增大其大小以适合图像。 As you can see, the image overflows.
如您所见,图像溢出。 I understand that if i have "display:inline-block", I will get this problem solved, but I want to know why this happens because when you have text inside anchor tag, the area will grow based on its content as the following picture
我了解如果我具有“ display:inline-block”,我将解决此问题,但是我想知道为什么会发生这种情况,因为当锚标记中包含文本时,该区域将根据其内容而增长,如下图所示
You can set the <a>
tag to { display: block; }
您可以将
<a>
标记设置为{ display: block; }
{ display: block; }
The space at bottom of a is line-height of img a底部的空间是img的行高
a img {
line-height: 0;
}
Or you also can set img display: block if a display block too 或者您也可以设置img display:block,如果显示块也是如此
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.