内边距Padding
你可能会说
字都顶到盒子边上了，让内容和边框之间留点空。
元素内容区域与边框之间的内侧留白间距。按钮文字四周、输入框内容与边框之间的空间通常用 padding 设置，它会带着元素的背景色并计入元素的可见尺寸。需要把组件彼此拉开时用外边距 Margin；不要用外边距假装按钮内部留白，否则点击区域不会跟着变大。
先知道
也常被叫作内边距内留白内边留白
你可以这样告诉 AI Agent
请增加按钮的水平和垂直 padding，让文字不贴边并扩大可点击区域，保持现有外部 margin 不变。用短文案、长文案和仅图标按钮检查高度、左右留白及点击范围。
什么时候用
什么时候不用
- 与外部元素之间的距离使用 外边距 Marginmargin ↔ 拉开外部距离padding ↔ 增加内部留白内容
- padding 过小会让内容紧贴边框，降低可读性和点击准确性
- 不要用 padding 模拟文字行距，行距应由 line-height 控制第一行第二行
- padding 过大导致内容可用空间不足，比例失衡
组成结构 · Anatomy
内容
padding 的外边界
带着元素背景色的留白区
位于内边距包裹之内的核心内容
常见变体 · Variants
均匀16px
内容
卡片、面板的默认留白
按钮式8px 16px
按钮
横向比纵向多，按钮、标签常用
非对称Asymmetric
卡片
某一侧需要更大的间距时
典型使用场景
卡片内容留白
padding: 16px
本周访问量
48,210
▲ 较上周 +8.2%
按钮点击区域
✕ 点击响应区域狭小
✓ padding: 10px 26px，易于准确点击
输入框文字留白
✕ padding 太小，内容紧贴边框
✓ 左右 14px，文字不贴边
弹窗内容留白
padding: 20px
开启消息通知？
有新评论时第一时间提醒你。
延伸阅读 · 权威出处
快速练习