为什么 a 标签点击区域默认太小
浏览器对 a 默认是 display: inline，它只包裹文字内容，上下 padding 不生效，左右 padding 虽然有效但无法撑开垂直可点击范围。用户常以为“鼠标移过去有下划线就该能点”，结果边缘点不中——其实是高度没撑开。
常见错误现象：a:hover 有样式，但靠近文字顶部/底部时点击无响应；移动端尤其明显，手指一滑就错过。
- 必须显式设
display: block或inline-block，让 padding 在垂直方向起作用 -
inline-block更适合导航栏内联布局，block适合独占一行的菜单项 - 别只加
height：硬设高度会裁剪文字或导致基线错位，用padding才自然
display: block + padding 的实操写法
最稳的组合是给导航链接加 display: block 和上下 padding，再配 line-height 居中（可选）。注意不要漏掉 text-decoration: none，否则下划线会干扰视觉高度判断。
nav a {
display: block;
padding: 12px 20px; /* 上下12px，左右20px */
text-decoration: none;
}- 移动端建议最小点击高度 ≥ 44px（iOS 触控规范），所以
padding-top + padding-bottom + font-size≥ 44 - 如果用了
line-height，确保它 ≥padding-top + padding-bottom + font-size，否则文字可能被截 - 避免同时设
height和padding，容易撑爆容器或引发 margin 折叠
用 inline-block 保持水平排列时要注意什么
导航栏通常是横向排列的，直接上 block 会让每个 a 换行，得靠 inline-block 解决。但它会把 HTML 换行符当空白字符处理，产生意外间隙。
立即学习“前端免费学习笔记（深入）”；
- 解决方案之一：父容器设
font-size: 0，子元素重设font-size - 更稳妥的是用
flex布局替代，但若必须兼容老浏览器，inline-block配vertical-align: middle更可控 -
vertical-align默认是baseline，容易导致链接上下错位，统一设成middle或top
移动端点击区域失效的隐藏原因
即使写了 padding，某些安卓 WebView 或 iOS Safari 仍可能判定点击无效——大概率是触发了“双击缩放”或 touch-action 限制。
- 确认
<meta name="viewport">存在且含user-scalable=no（非必需，但能排除缩放干扰） - 加
touch-action: manipulation到链接上，告诉浏览器这是点击操作，不是拖拽 - 避免在
a外层套div并监听click，这会破坏原生链接的 tap 延迟优化
实际改起来就两行关键 CSS：display: block 和带足够上下值的 padding。最容易被忽略的是：没检查 font-size 和 line-height 是否与 padding 协调，导致视觉高度够了、实际点击区还是偏小。
