行内元素垂直 padding 不扩大点击区域，因其不参与布局且无垂直 padding box；修复需改 display: inline-block 并设 box-sizing: border-box、min-width/min-height 及 vertical-align。
行内元素（如 a、span）加了 padding 却点不中，不是 CSS 写错了，是它根本没生效——垂直方向的 padding-top 和 padding-bottom 在默认 display: inline 下不参与布局，也不扩展点击热区。
为什么行内元素的 padding-bottom/top 不扩大点击区域
浏览器判定可点击区域时，只认元素的 content box + padding box；但行内元素压根没有独立的垂直 padding box——它的 padding-top 和 padding-bottom 被规范定义为“不撑开行框”，开发者工具里能看到值，但 computed 样式中 vertical padding 区域无背景、无尺寸、不响应事件。
- 用
background-color测试：给span加padding: 12px+background: red，只会看到左右红块，上下仍是透明 -
line-height才控制视觉垂直空间，但它不等于点击热区；iOS Safari 下未设padding的纯a标签，实际可点高度常只有 16–18px - 即使加了
padding，若没改display，offsetHeight也几乎不变，getBoundingClientRect()返回的高度不会包含所谓“上下 padding”
修复必须改 display，且优先选 inline-block
让垂直 padding 真正生效并扩展点击热区，唯一可靠路径是切换显示模式。其中 display: inline-block 是最兼容、副作用最小的选择。
- 它保留行内流位置（不换行、不破坏文本流），同时激活完整盒模型：
padding、margin、width、height全部起作用 - 必须显式设置
vertical-align: middle或top，否则默认baseline会对齐文字底部，造成视觉下沉 - 父容器若有空格或换行，多个
inline-block元素间会出约 4px 间隙，可用font-size: 0在父级清除，再在子级重置font-size - 示例：
a.btn { display: inline-block; padding: 12px 20px; vertical-align: middle; }
box-sizing: border-box 是 padding 不破布局的前提
加了 padding 后按钮变宽、网格错位、相邻元素被挤开？大概率是还在用默认的 box-sizing: content-box。
- 默认下
width: 100px; padding: 12px→ 实际总宽 = 100px + 24px，超出预期 - 设
box-sizing: border-box后，padding和border被算进设定的width/height内，尺寸可控，热区边界才稳定 - 全局推荐写法：
* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }（伪元素不继承，必须单独声明） - 第三方组件（如 React Button）可能覆盖该规则，需在组件级样式中补全
min-width/min-height 是 padding 的必要兜底
padding 解决了高度问题，但短文本（如 “×”、“→”、“是”）会让按钮宽度严重不足——iOS 要求最小触控目标为 44×44px，单靠 padding: 12px 无法保证宽度达标。
- 文字极短时，
padding: 12px 20px得到的总宽 ≈ 24px + 40px = 64px，勉强达标；但若只写padding: 12px，水平方向只有 24px，远低于 44px - 必须加
min-width: 44px和min-height: 44px，尤其对图标按钮、单字符按钮 - 避免用
width: 44px强制固定——长文本会溢出或换行，min-width更安全 - 真机测试时，用
outline: 2px solid red临时标出热区，确认是否贴合视觉边界
最容易被忽略的是：所有这些改动都得在真机上验证。Chrome DevTools 的设备模拟器不触发 iOS 的触控目标校验逻辑，也不模拟安卓 WebView 对 user-select: none 的点击抑制行为——点不中，90% 的原因不在代码本身，而在你没拿 iPhone 实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
