内边距Padding
你可能会说
字都顶到盒子边上了，让内容和边框之间留点空。
元素内容区域与边框之间的内侧留白间距。按钮文字四周、输入框内容与边框之间的空间通常用 padding 设置，它会带着元素的背景色并计入元素的可见尺寸。需要把组件彼此拉开时用外边距 Margin；不要用外边距假装按钮内部留白，否则点击区域不会跟着变大。
也常被叫作内边距内留白内边留白
组成结构 · Anatomy
内容
padding 的外边界
带着元素背景色的留白区
位于内边距包裹之内的核心内容
常见变体 · Variants
均匀16px
内容
卡片、面板的默认留白
按钮式8px 16px
按钮
横向比纵向多，按钮、标签常用
非对称Asymmetric
卡片
某一侧需要更大的间距时
典型使用场景
卡片内容留白
padding: 16px
本周访问量
48,210
▲ 较上周 +8.2%
按钮点击区域
✕ 点击响应区域狭小
✓ padding: 10px 26px，易于准确点击
输入框文字留白
✕ padding 太小，内容紧贴边框
✓ 左右 14px，文字不贴边
弹窗内容留白
padding: 20px
开启消息通知？
有新评论时第一时间提醒你。
延伸阅读 · 权威出处