卡片整个区域应响应点击，但默认仅文字可点，需通过display: block、负margin抵消、伪元素扩展或min-width/min-height等方案确保热区≥44×44px并经真机验证。
卡片整个区域都该响应点击，但只有文字能点到
这是最典型的「视觉可点击区域 ≠ 实际可点击区域」问题。默认情况下，<a></a> 或 <button></button> 的点击热区仅覆盖其内容尺寸（比如文字本身），即使你给外层容器加了 padding，如果事件绑定在子元素上，父容器的 padding 依然不参与响应。
- 确保点击事件绑定在**有足够尺寸的块级元素**上，比如把
<a></a>设为display: block或直接用<button></button> - 避免只给文字包裹的
<span></span>加点击事件——它天生是 inline 元素，padding在垂直方向无效 - 检查是否意外设置了
pointer-events: none或父级遮挡（如伪元素、重叠的空 div）
用 padding 扩大点击区域但不撑开布局
直接给卡片容器加 padding 会改变内容间距，有时还导致阴影/边框错位。更稳妥的做法是：用 padding 扩展可点击区域，同时用负 margin 抵消视觉位移。
/* 卡片容器 */
.card {
display: block;
padding: 16px; /* 扩大热区 */
margin: -16px; /* 抵消 padding 导致的外边距膨胀 */
}
.card::before {
content: "";
display: block;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
}
注意：margin: -16px 仅适用于卡片作为 flex/grid 子项或脱离文档流的场景；若卡片是普通文档流中的块级元素，改用 transform: translate() 更安全。
移动端点击区域至少 44×44px 是硬要求
iOS 和 Android 都建议最小触控目标为 44px × 44px，低于这个值容易误点或点不中。光靠视觉 padding 不够，还要验证最终渲染尺寸：
- 用浏览器开发者工具选中元素，看「Computed」面板里的
width/height是否 ≥ 44px - 如果卡片内容窄（比如只有图标），直接设
min-width: 44px; min-height: 44px; - 对
<button></button>，加上touch-action: manipulation可减少 300ms 点击延迟
用伪元素扩展点击区域（无侵入方案）
当不能改 HTML 结构时，用 ::after 伪元素模拟一层透明点击层是最干净的解法——它不干扰布局，也不影响语义。
.card {
position: relative;
}
.card::after {
content: "";
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
z-index: 1;
}
这个伪元素会向外扩展 8px，让整个卡片边缘也具备响应能力。关键点：z-index: 1 必须高于卡片内容（否则被盖住），且不能设 pointer-events: none。
真正容易被忽略的是：很多项目只调了视觉样式，却没在真机上用手指点一遍。再小的卡片，只要用户要点击，它的热区就必须达标——不是“看起来能点”，而是“指腹放上去就触发”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
