←→ 切换·Esc 返回

内边距Padding

样式与布局基础
控制内容与自身边框之间的距离
先知道
间距 Space

内边距位于内容和边框之间，会带着元素的背景一起变大。需要增加组件内部呼吸感时使用 padding；需要拉开两个元素时通常使用外边距 Margin或布局间距。

内容

什么时候用

  • 卡片 Card 内容别顶边：四边留一圈呼吸感
  • 按钮 Button 的文字周围：padding 决定点击区域好不好点
    挤舒服
  • 输入框 Input 文字不贴边：左右 padding 至少 8px
    顶着边留了 padding
  • 容器内统一留白：一处 padding 管住所有内容

什么时候不用

  • 想拉开和外面元素的距离 → 该用 外边距 Margin
    margin ↔ 拉开外部距离padding ↔ 增加内部留白内容
  • padding 太小，内容紧贴边框，阅读和点击都不舒服
  • 不要用 padding 模拟文字行距，行距应由 line-height 控制
    第一行第二行行距该用 line-height，不是给每行包 padding
  • padding 大到内容只剩一条缝，比例失衡
组成结构 · Anatomy
内容
1边框Borderpadding 的外边界
2内边距Padding带着元素背景色的留白区
3内容Content被 padding 护在中间的内容
常见变体 · Variants
均匀16px
内容
卡片、面板的默认留白
按钮式8px 16px
按钮
横向比纵向多，按钮、标签常用
非对称Asymmetric
卡片
某一侧要更多呼吸感时
典型使用场景
卡片内容留白
padding: 16px
本周访问量
48,210
▲ 较上周 +8.2%
按钮点击区域
✕ 点击区域只有一丁点
✓ padding: 10px 26px，好按
输入框文字留白
✕ padding 太小，内容紧贴边框
✓ 左右 14px，文字不贴边
弹窗内容留白
padding: 20px 开启消息通知？

有新评论时第一时间提醒你。