为什么导航按钮设置与页面显示一致的padding值却出现样式异常

• 样式上下文不匹配是核心问题
  你抄的只是目标站点单个padding属性，没有同步照搬它配套的其他样式规则：目标站点的导航a标签设置了display: block，且没有额外声明line-height: 46px，它的导航项总高度是「内容行高 + 12px上下padding」刚好凑成46px，和导航栏高度一致，所以不会溢出。
• 你的代码里line-height和上下padding叠加导致高度溢出
  你自己的代码里已经给a标签设置了line-height: 46px，如果再加上12px上下padding，a标签的总可视高度就变成了46px + 12px*2 = 70px，远大于导航栏的高度，自然就会撑开容器、出现你看到的异常样式。
• 修改后正常的逻辑
  把上下padding改为0后，a标签的总高度刚好等于你设置的46px行高，和导航栏高度匹配，所以样式就恢复正常了。

如果你想直接用12px上下padding的写法，只要给#nav li a加上display: block，同时删掉line-height:46px的规则即可，最终效果和目标站点一致。

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