CSS 困惑：为什么人们习惯于 link 文本水平填充？

Question

最近看了一些关于如何制作纯CSS下拉菜单的教程：

我在处理 li 项中的链接时发现它们，它们用于向 <a> 元素添加水平填充。

这样的代码：

li a {
    padding:0 20px;
}

在我看来，没有填充的事件不会影响功能或视觉效果。我猜添加填充的唯一原因是填充会使点击区域更大？

有人可以解释一下吗？

Answer 1

删除这些元素的填充将对相关列表项的视觉效果产生很大影响。

以您的第 3 个 link 为例，它使用嵌套列表，一个 <ul> 列表位于另一个列表的 <li> 列表项中。

嵌套列表项中的<a>有如下填充规则：

padding: 10px;

这会在文本周围创建 space，如果没有它，列表会显得局促，简单地说，没有吸引力。

在主导航栏上，#menu a上有一个padding规则， padding: 0 25px;，我想这就是你最初的问题。

去掉这个规则，你会发现一个巨大的变化。所有列表项都将彼此紧挨着显示，没有间距，而不是 spaced 很好地显示出来。正如你提到的，你不需要在这里使用填充，margin: 0 25px; 会有类似的外观，但可点击区域较小。

长的（令人费解的，抱歉）答案，简短的结论。是的，你是对的，因为填充是不必要的，可以用其他规则（如边距）代替，但这会导致可点击区域小得多。出于用户体验的原因，这里首选填充方法。恐怕你错了，是说填充对视觉风格没有影响。在您最喜欢的浏览器开发工具或类似工具中试用它，当您禁用任何填充规则时，您会发现巨大的差异。

希望这对您有所帮助，我很乐意回答任何进一步的问题:)

CSS 困惑：为什么人们习惯于 link 文本水平填充？

CSS confuse: Why people used to horizontal padding to link text?

css

padding