← 返回 Web 词条

内边距

Web原生支持

在 Web 上叫padding

也叫 内边距

CSS: padding

内边距区域是内容与边框之间的空间。box-sizing 改变的是声明的 width/height 如何计入内边距与边框,不改变内边距本身。

元素内容和自己边框之间的那段空隙,让内容不贴着边缘。

  • 框里面留的空
  • 文字离边框的距离
  • 把内容往里推一点的空隙
  • 内边距
  • 内填充
  • 内部间距

示例

Webpadding原生支持点选数值,样本实时变化
内容

padding: 16px;

其他平台的相似实现

iOS原生支持
padding同名

修饰符顺序影响结果:.padding().border() 与 .border().padding() 表达的是不同关系。

看 iOS 视角 →
Android原生支持
padding同名

修饰符按链式顺序生效,padding 放在 border 之前或之后表达的是不同关系。

看 Android 视角 →

跨端框架实现

  • FlutterPadding

    Padding(padding: EdgeInsets…, child: …)

    EdgeInsetsGeometry 是取值类型,不是实现入口;入口是 Padding 这个 Widget。

    Flutter — Padding class · Flutter

使用规范

什么时候用

  • 需要让内容不贴着容器边缘时
  • 需要扩大可点区域而不改变内容本身时

什么时候别用

  • 要在两个元素之间留空时——那是外边距或间隔
  • 要让整块内容离屏幕边缘更远时,应由容器统一处理

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →