按钮自身 padding: 12px
命中区撑到 84×44px，达到 AAA；文字到边框有呼吸，误触减少。
产品与设计 · 布局基础
内边距Padding
控制边框内侧到内容的空隙——padding 在元素内部撑大可点击区、给内容呼吸；margin 在外面推邻居，扩大不了命中区。
修复一个只推开邻居、却没变好按的按钮
「保存设置」需要 44px 高的命中区；现在把 12px 写在 margin，只有「取消」被推走，按钮仍只有 28px 高。切到 padding：按钮物件的边框、命中区读数和 44px 徽章会一起改变；切回 margin 能复现误修。
任务：「保存设置」在触屏上要有至少 44px 高的命中区。现在 12px 被加在 margin 上：邻居被推开了，按钮本身仍不好按。
命中区 68×28pxAA 24px ✓已点 0 次
邻居元素
调整按钮内缘，或故意改用 margin 对照
用 margin 扩大。 命中区停在 68×28px，滑杆再大也不变。margin 在边框外，只把「取消」推开 12px，不进按钮自身。下一步：切回 padding，命中区才随内边距长大。
从刚才的演示能读出什么
四条结论直接对应面板里看到的物件变化。
- 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？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。