填充在锚点中不起作用[关闭]答案

【问题标题】：Padding not working in anchor [closed]填充在锚点中不起作用[关闭]
【发布时间】：2020-09-17 09:58:13
【问题描述】：

我在锚点内的文本没有填充，但在悬停时会应用填充。这就是为什么在悬停时我的网络结构只是在移动。请帮忙。

【问题讨论】：

把你的 HTML 和 CSS 给我们，我们会检查出来的。
锚标签是一个内联元素。填充不适用于内联元素。您必须将其设为块元素
@Deekey：是的，确实如此：jsfiddle.net/LinkinTED/4d7q6gwp

【解决方案1】：

锚链接（a 元素）是内联元素，它们不能有填充。使它们成为内联块必须有效。

只需添加：

a
{
    display:inline-block;
}

【讨论】：

他们可以在左右两边有填充物..顶部和底部也有..但不占用空间
哦，是的。我想说。

【解决方案2】：

您需要将display:block 或display:inline-block 应用于锚链接

【讨论】：

【解决方案3】：

Anchor 是一个内联元素，因此填充可以工作，但不会占用顶部和底部的空间。元素重叠。因此，根据您的要求将其设为inline-block 或block。

<a href="#" style="display:block;padding:10px">Click here</a>

【讨论】：

【解决方案4】：

只需在你的锚标签上添加这个 CSS display:block

<a href="#" style="display:block; padding:4px ">Click here</a>

【讨论】：

为什么？没有它也可以工作：jsfiddle.net/LinkinTED/4d7q6gwp
它可以工作，但不占用空间。再添加一行，看看它会重叠，因为它是一个内联元素。
@LinkinTED Padding 可以应用于内联元素，但只有左右填充会影响周围的内容。看看这个jsfiddle.net/vinith98/u79egvjm
jsfiddle.net/4d7q6gwp/2
@VinithAlmeida：是的，没错。

【解决方案5】：

由于您使用的是padding，我假设您还定义了background-color，也许还有border。如果您使用border，请确保为所有状态的链接设置相同的border-width；在您不希望它显示的状态下，将其设置为与背景相同的颜色。完成此操作后，当您悬停/单击它时，它不会移动它周围的文本。

【讨论】：

【解决方案6】：

<a href="#" class="btn btn-info" role="button">button</a>

【讨论】：

一位用户将此答案标记为低质量，我正在对其进行审查。我不会投票删除它，但是虽然这段代码可能会回答这个问题，但最好包含一些上下文来解释它的工作原理和原因。仅代码答案不会教任何人任何东西。