横向导航空白区域点不中是因为默认为行内元素，热区仅覆盖文字，上下留白不属于可点击区域；解决方法是给设display:inline-block并加padding，同时父容器用flex+align-items:center确保padding生效。
为什么横向导航的空白区域点不中
横向导航（比如用 <nav></nav> 包裹一串 <a></a>）默认是行内流，每个 <a></a> 只包裹文字，上下留白由 line-height 和字体基线决定，但这些留白不属于可点击热区。iOS Safari 实测热区高度常只有 16–18px，远低于 44px 触控底线。用户点在“看起来有空间”的地方没反应，不是手抖，是浏览器压根没把那块算进热区。
常见误操作包括：
- 只调 font-size 或 line-height，文字变大但热区不变
- 给 <a></a> 加 margin，空白扩大了，但仍是不可点击的布局空隙
- 父容器设 padding，结果整条导航栏都响应点击，连分隔符和空白都可点
给 <a></a> 加 padding 并显式设 display: inline-block
这是最稳、兼容性最好、语义也正确的做法。inline-block 让 <a></a> 既能并排显示，又能完整响应四向 padding，且不破坏文档流。
实操要点：
- 必须写 display: inline-block（不能只靠默认或继承，CSS 重置可能覆盖）
- padding: 12px 16px 是移动端安全起点；文字短时建议加 min-height: 44px 兜底
- 避免 vertical-align: baseline（默认值），改用 vertical-align: middle 防图标或 SVG 错位
- 若用 Flex 布局，父容器要设 align-items: center，否则 padding-top 可能被截断
用 Flex 布局撑满父容器高度，避免顶部/底部空白失效
横向导航常嵌在 <nav></nav> 或 <header></header> 中，如果父容器没明确高度或未启用 Flex 对齐，子 <a></a> 的上下 padding 很容易被裁掉——尤其当父级设了 overflow: hidden 或 height: fit-content。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键配置：
- 父容器加 display: flex + align-items: center + min-height: 44px
- 不要用 transform: translateY() 居中，热区不会跟着动
- 禁用 vertical-align（它对 Flex 子项无效，但若混用 display 模式会引发错位）
三个静默导致点击失效的 CSS 干扰项
结构和尺寸都对了，真机一点没反应？问题大概率藏在这几个“看不见”的样式里：
立即学习“前端免费学习笔记（深入）”；
- touch-action: none 放在 <nav></nav> 或任意父级上，会彻底禁用点击穿透
- pointer-events: none 即使只加在伪元素 ::before/::after 上，也会阻断事件冒泡
- user-select: none 在某些 Android WebView 下会连带抑制 click 冒泡；如需禁选，保留标准属性为 text，仅加前缀
真正难的不是怎么写，而是意识到：所谓“空白区域点不中”，本质是热区没覆盖到手指落点——而浏览器只认 padding 边界，不认视觉留白。
