为什么 <a> 没有填满 <td> 但它的宽度和高度为 100% [重复]答案

【问题标题】：Why doesn't <a> fill up <td> but it has width and height on 100% [duplicate]为什么 <a> 没有填满 <td> 但它的宽度和高度为 100% [重复]
【发布时间】：2021-09-17 21:55:05
【问题描述】：

我有一个问题，我想要一个带有链接的表格。我有一个像这样的标签的孩子：

<table>
    <tr>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/overview">Controllpanel</a></td>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/deploys"><img src="https://api.netlify.com/api/v1/badges/db717d14-d6ee-42c3-ae0e-3eb748d705aa/deploy-status"alt="Netlify Status"></a></td>
    </tr>
</table>

现在我希望第一个填充我尝试过的这个：

a {
    text-decoration: none;
    color: #000;
    width: 100%;
    height: 100%;
}

那应该用the填还是不填？在下图中，您可以看到只有文本 (1) 的大小。但是你也可以看到它有我提到的 CSS (3) 并且是 (2) 的子元素。

那为什么不 >a> 填满？以及如何填充与尺寸相同的填充物？

【问题讨论】：

显示为block
锚标签默认为display: inline。让它display: block。

标签： html css html-table

【解决方案1】：

原因是<a>标签默认显示为display: inline，不响应宽高CSS；您必须将其更改为 display: inline-block。

此外，如果您的表格单元格有填充，并且您希望 <a> 完全填充它，请删除单元格的填充或将负边距应用于等于单元格填充的锚。

【讨论】：

这个问题，不出所料，之前已经被问过很多次了。如果一个问题看起来很简单，请通过找到原始问题来帮助我们，而不是回答

【解决方案2】：

锚标签默认为inline elements。将它们设置为display: block，您的问题就解决了！

【讨论】：

这个问题，不出所料，之前已经被问过很多次了。如果问题看起来很简单，请通过查找原始问题来帮助我们，而不是回答。
@HereticMonkey 对不起，我认为this post 是原始问题
然后将该问题标记为该帖子的副本。