display: inline-block 是兼具行内排列与块级特性的布局方式，可设宽高、内外边距，常用于导航项、按钮对齐；但存在换行导致的4px间隙问题，需通过 font-size: 0 或微调宽度等方法消除。
直接加 padding 并设 display: inline-block 或 display: block，是最稳、最兼容的解法；其他“看起来能点”的方式（比如只调 font-size、用 transform: scale()、或靠 width/height 硬撑）基本都失效或有坑。
为什么只改 font-size 或 width/height 不行
文字变大 ≠ 点击区域变大。font-size 只影响内容渲染，不扩展元素的可响应边界；width/height 对 <button></button> 这类替换元素，在部分浏览器中甚至被 UA 样式忽略。真正决定热区的是 content box + padding box —— margin 完全不参与事件捕获。
- iOS Safari 要求最小触控目标为
44×44px，而纯文字撑开的按钮常只有16–20px高 - 若父容器有
overflow: hidden或高度受限，line-height产生的上下留白会被截断 -
transform: scale()会放大视觉但不扩大真实热区，还导致点击偏移、文字模糊、安卓 WebView 中可能完全不生效
padding 生效的前提：必须控制 display 和避开干扰样式
<button></button> 默认是 display: inline-block，但一旦被重置为 display: inline，旧版 Safari 和部分 Android WebView 会忽略 padding-top/padding-bottom，垂直热区直接缩水一半。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 显式声明
display: inline-block或display: block，确保padding生效 - 移动端建议加
min-height: 44px，比单纯依赖padding更稳（尤其文字短时） - 避免
touch-action: none：它禁用浏览器默认点击穿透，label或button无法把事件“嫁接”到内部控件 - 避免
pointer-events: none（哪怕只在父级设了也无效），以及user-select: none（某些 Android WebView 下连带抑制 click 冒泡） - 父容器设了
overflow: hidden且用了border-radius？热区可能被裁切，视觉可见但点不中
用 label 包裹 input 是唯一免 JS、无障碍友好的热区方案
这是针对单选/复选框的特例，但效果极好：只要 input 是 label 的**直接子节点**，整个 label 渲染区域（含文字、空白、图标、padding）都会映射为控件热区——不是 JS 模拟，是 HTML 语义规范强制行为。
-
input不能是display: none或visibility: hidden；可用opacity: 0; position: absolute;移出视口，但 DOM 必须存在 -
label默认是inline，必须设display: inline-block或display: block才能撑开热区 - 用 Flex 布局时加
align-items: center，防input被挤出可点击范围 - 若结构不允许嵌套（如表格里 input 在末列），改用
for+id关联，但label仍需显式设min-height和padding
伪元素扩热区：仅限高级场景，慎用
用 ::after 绝对定位扩展点击区域可行，但属于“绕过标准”的技巧，容易引入新问题：
-
.btn::after { content: ""; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; }看似简单，但会覆盖相邻元素，破坏 z-index 层级 - 若按钮本身有
border-radius，伪元素无法自动同步圆角，热区仍是直角矩形 - 真机测试时，iOS Safari 可能因
touch-action限制导致伪元素区域无响应 - 更关键的是：它不提升无障碍体验，屏幕阅读器不会把伪元素区域识别为控件热区
真正复杂的地方不在“怎么写”，而在“为什么写了却没反应”——绝大多数失效案例，都是 pointer-events、touch-action 或 display 类型错配导致的静默拦截，而不是 CSS 写得不够多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
