SAPUI5 边距类（Margin Classes）全面解析与速查表
目录
在 SAPUI5 的开发过程中，我们经常需要控制控件之间的间距。虽然可以通过自定义 CSS 实现，但 SAP 官方早已为我们提供了一整套 边距辅助类（Margin Utility Classes），可以快速、优雅地为控件添加间距。
本文将带你系统了解 SAPUI5 中的边距类，包括常用命名规则、间距大小、方向含义，以及如何正确使用它们。
📌 一、命名规则
SAPUI5 的边距类使用以下命名结构：
Markup 全选
sapUi<Size>Margin<Direction>Size：表示间距的大小，例如 Tiny、Small、Medium、Large、NoneDirection：表示方向，例如 Top、Bottom、Begin、End、Left、Right、All🧱二、支持的间距大小（Size）
| 大小关键词 | 英文释义 | 说明（约等于 rem） |
|---|---|---|
None | 无间距 | 清除已有间距 |
Tiny | 极小间距 | 约 0.25rem |
Small | 小间距 | 约 0.5rem |
Medium | 中间距 | 约 1rem |
Large | 大间距 | 约 2rem |
📌默认值：sapUiMargin 相当于 sapUiMediumMarginAll
🧭 三、支持的方向（Direction）
| 方向关键词 | 实际边距位置 | 特点说明 |
|---|---|---|
Top | 上边距 | 常用于垂直间距 |
Bottom | 下边距 | 同上 |
Left | 左边距 | 固定方向 |
Right | 右边距 | 固定方向 |
Begin | 起始边距 | LTR：左，RTL：右，适配多语言 |
End | 结束边距 | LTR：右，RTL：左，适配多语言 |
All | 所有方向 | 四个方向都有间距 |
🔧 四、常见用法示例
🎯 示例 1：两个按钮之间加一点水平间距
HTML 全选
<Button text="保存" class="sapUiTinyMarginEnd" />
<Button text="取消" />🎯 示例 2：表单项之间加垂直间距
HTML 全选
<Input placeholder="用户名" />
<Input placeholder="密码" class="sapUiSmallMarginTop" />🎯 示例 3：添加大间距以分隔两个区域
HTML 全选
<Label text="基本信息" class="sapUiLargeMarginTop" />🎯 示例 4：四边统一小间距
HTML 全选
<Panel class="sapUiSmallMarginAll">
<Text text="这是一个带边距的面板" />
</Panel>📋 五、实用速查表
| 类名 | 作用 |
|---|---|
sapUiTinyMarginTop | 上边距极小 |
sapUiSmallMarginBottom | 下边距小 |
sapUiMediumMarginBegin | 起始方向中间距 |
sapUiLargeMarginEnd | 结束方向大间距 |
sapUiNoneMarginLeft | 去除左边距 |
sapUiSmallMarginAll | 所有方向小间距 |
sapUiMargin | 默认中间距，等同于 sapUiMediumMarginAll |
🧠 六、实战建议
建议优先使用
Begin/End方向类，而不是Left/Right，以便支持 国际化（RTL）。配合
HBox和VBox布局使用，可以非常高效地控制组件间距。如需完全自定义，可以使用
style或自定义 CSS，但一般推荐先用内置类。
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
sapui5-fiori 张国生
