内边距布局
元素内容和自己边框之间的那段空隙,让内容不贴着边缘。
- 框里面留的空
- 文字离边框的距离
- 把内容往里推一点的空隙
- 内边距
- 内填充
- 内部间距
示例
内容
padding: 16px;
Web / iOS / Android 对照
Web原生支持
平台通用范围
padding
也叫 内边距
CSS: padding
内边距区域是内容与边框之间的空间。box-sizing 改变的是声明的 width/height 如何计入内边距与边框,不改变内边距本身。
iOS原生支持
平台通用范围
padding
SwiftUI: .padding(_:_:)
修饰符顺序影响结果:.padding().border() 与 .border().padding() 表达的是不同关系。
Android原生支持
平台通用范围
padding
Compose: Modifier.padding
修饰符按链式顺序生效,padding 放在 border 之前或之后表达的是不同关系。
使用规范
什么时候用
- 需要让内容不贴着容器边缘时
- 需要扩大可点区域而不改变内容本身时
什么时候别用
- 要在两个元素之间留空时——那是外边距或间隔
- 要让整块内容离屏幕边缘更远时,应由容器统一处理
容易混淆
跨端框架实现
- Flutter
PaddingPadding(padding: EdgeInsets…, child: …)EdgeInsetsGeometry 是取值类型,不是实现入口;入口是 Padding 这个 Widget。
给 AI 的提示词
这条词条还没有经过验证的实现提示词。