按钮自身 padding: 12px
命中区撑到 84×44px，达到 AAA；文字到边框有呼吸，误触减少。
产品与设计 · 布局基础
内边距Padding
控制边框内侧到内容的空隙——padding 在元素内部撑大可点击区、给内容呼吸；margin 在外面推邻居，扩大不了命中区。
padding 还是 margin：谁能扩大可点击区
一个「保存设置」按钮贴边、不好按。切 padding / margin，拖动空间滑杆：按钮的命中区尺寸、AA 达标徽章和「取消」的位置都长在物件上，不是只读一句解释。
命中区 84×44pxAAA 44px ✓已点 0 次
邻居元素
用 padding 扩大。 命中区实际 84×44px，达到 AAA 44px。padding 在边框内、计入按钮自身尺寸，文字到边的距离就是它。对照：切到 margin，命中区不变，只推邻居。下一步：把滑杆拉到 0 看文字贴边、命中区变小。
从刚才的演示能读出什么
四条结论直接对应面板里看到的物件变化。
- padding 在边框内：是内容到边框的空隙。演示里它就是按钮字与边之间的留白，加大它按钮自己变大。
- padding 撑大命中区：可点击区 = 内容 + 左右 padding（高度同理）。切 padding 模式拖滑杆，命中区数字随它长。
- padding 计入元素自身：与 margin 不同，padding 是按钮这个盒子的一部分，所以能扩大点击目标；WCAG 2.5.8 要求目标至少 24px。
- margin 扩大不了命中区：margin 在边框外，只把「取消」推开。切 margin 模式，命中区数字不动，只有邻居位置动。
什么时候用
按看到的症状判断，而不是无脑加空隙。
- 用 padding：按钮、菜单项、输入框文字贴边，或命中区小于 24px 不好按；卡片、单元格需要内容呼吸。
- 不要用 padding 当布局间距：组件与组件之间的距离用 margin 或间距系统（space），padding 留给组件内部。
- 不要用 margin 扩大点击区：它只推邻居，按钮自己还是那么小，密集表格里尤其容易误触。
怎么用：从贴边到可点
四步把一个贴边按钮改成可验收的点击目标。
- 确认元素 box-sizing（组件默认 border-box），padding 会算进声明宽度，不会额外撑破。
- 按设计令牌选 padding 档位（如 8 / 12 / 16），水平和垂直一起设。
- 算命中区高度 ≥ 24px（AA），关键按钮争取 44px（AAA）。
- 窄屏可缩小 padding，但保留焦点轮廓，确认文字不贴边、不溢出。
正反例：要扩大按钮命中区
同一个按钮、同样加 12px，只改 padding / margin 一处。
按钮 padding 不变，margin-right: 12px
命中区还是 68×28px，只是把「取消」推开；按钮仍小，密集区照样难按。
快速自测
按钮「保存设置」文字贴边、密集列表里老误触，目标高度只有 20px。哪种改法能让命中区达到 AA 24px？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。