关闭按钮点不中是因为可点击区域未撑开，需用padding+min-size强制热区≥44×44px、避免inline显示、可用::after伪元素扩展透明热区或label包裹法提升可访问性。

为什么关闭按钮点不中？

多数人写 <button>×</button> 后发现：视觉上看着够大，但手指或鼠标总点不准。根本原因不是“按钮小”，而是可点击区域没撑开——浏览器默认只把文字内容框（含默认 padding）当热区，× 字符本身宽度可能只有 12px，上下留白又常被 CSS 重置掉。移动端尤其明显，iOS/Android 系统会静默忽略小于 44×44px 的触控目标。

用 padding + min-size 强制撑开热区

最直接有效的方式是放弃靠字体大小“撑”按钮，改用 CSS 显式控制交互尺寸：

• padding 至少设到 12px 以上（左右+上下加起来 ≥ 44px）
• 必须加 min-width: 44px 和 min-height: 44px，防止文字过短时按钮塌缩
• display 别用 inline；inline-block 或 flex 更稳，避免旧版 Safari 忽略垂直 padding
• 别只写 font-size: 24px —— 它只放大字符，不扩大热区

用伪元素扩展热区（不改变视觉）

当按钮已有固定样式、不能动 padding 时，::after 是轻量级补救方案：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给按钮加 position: relative
• 用 .close-btn::after 绘制一个透明扩大层：content: "" + position: absolute + 四边负偏移（如 top: -12px; left: -12px; bottom: -12px; right: -12px）
• 这个伪元素不占布局、无颜色、不影响外观，但浏览器把它算进点击热区
• 注意：父容器不能有 overflow: hidden，否则伪元素被裁剪，热区失效

label 包裹法在特定场景更省心

如果你的关闭按钮本质是控制某个开关（比如隐藏弹窗的 checkbox），<label><input type="checkbox"> 关闭</label> 是最省事的方案：

立即学习“前端免费学习笔记（深入）”；

• 整个 label 区域（含文字、空白、padding）天然映射为 input 的点击热区
• input 必须是 label 的**直接子节点**，中间不能嵌 span 或 div
• label 需设 display: inline-block 或加 min-height: 44px，否则默认 inline 尺寸太小
• 禁用 pointer-events: none、touch-action: none 这类拦截样式，它们会让热区传导中断

实际中最容易被跳过的，是移动端真机测试前没验证点击边缘区域，以及键盘用户按空格键时按钮无响应——这两处问题不会在桌面浏览器开发者工具里暴露出来。