关于Anchor与li标签padding效果差异的技术疑问

先明确基础规则：

• display:inline元素：上下padding会占据空间但不会改变垂直布局（不会推开上下元素，视觉上可能溢出父容器），左右padding正常生效，会水平推开相邻元素。
• display:inline-block元素：上下左右padding都会完全影响布局，会同时推开水平和垂直方向的相邻元素。

以下针对你的两个测试案例逐一拆解：

案例1：给Anchor元素设置padding #

你的CSS中，.nav a原本设置了display:inline-block和padding:.5em（上下左右均有内边距），但.main-nav a的padding:0 5%优先级更高，直接覆盖了前者的padding配置——这意味着<a>元素的上下padding被设为0，仅左右保留5%的内边距。

你看到的"只有左右生效"是因为你主动设置了上下padding为0，完全符合inline-block元素的padding规则，并非理论失效。

案例2：给List元素设置padding #

这里.main-nav li设置了padding:0 5%，而<li>是display:inline元素：

• 左右5%的padding正常生效，水平推开了相邻的<li>元素，这完全符合inline元素的规则。
• 上下padding为0，所以看不到垂直方向的变化。而你看到的垂直空间，来自未被覆盖的.nav a的padding:.5em——这个空间属于<a>（inline-block），而非<li>（inline）。

你觉得结果和预期相反，本质是两个混淆点：

1. CSS选择器优先级：.main-nav a的设置覆盖了基础样式，导致实际生效的padding值和你预想的不一致。
2. 元素归属错误：误把<a>的padding效果当成了<li>的。

内容的提问来源于stack exchange，提问作者Vinayak Nagri