共计 1704 个字符，预计需要花费 5 分钟才能阅读完成。
与 padding 不同，margin 是通明的，不是 控件可单击区域的一部分，并且它们与相邻边距 折叠在一起，这意味着它们不会互相增加。例如，有两个相邻的 32 像素 margin，则后果是仅显示一个 32 像素边距，而不是 64 像素的空间。
SAPUI5 中预约义的所有边距都反对从右到左 (RTL) 语言：当向左侧增加边距时，如果用户抉择了 RTL 语言（例如希伯来语或阿拉伯语），咱们会确保它显示在右侧。对于咱们的 CSS 类，咱们提供四种规范尺寸，即 tiny（0.5rem 或 8px）、small（1rem 或 16px）、middle（2rem 或 32px）和 large（3rem 或 48px）。
有四种类型的边距可用：
- 残缺的边距，齐全围绕 SAP UI5 控件
- 单面边距
- 两侧边距
- 响应式边距，适应可用的屏幕宽度
在 Web 开发中，Margin 是指元素四周的空白区域，用于管制元素与其四周元素之间的间隔。SAP UI5 为开发者提供了一系列预约义的 CSS Margin 类，使开发者可能轻松地为 UI 元素利用不同的间距。这些类能够间接利用于 UI5 控件，从而在不编写自定义 CSS 的状况下扭转元素的外观和布局。
在 SAP UI5 中，Margin 类的命名通常基于一种简略的模式，它批示了元素四周的间距。例如，以下是一些常见的 Margin 类：
sapUiMarginBegin：在元素的开始（左侧）增加间距。sapUiMarginEnd：在元素的完结（右侧）增加间距。sapUiMarginTop：在元素的顶部增加间距。sapUiMarginBottom：在元素的底部增加间距。sapUiMargin：在元素的四个边缘都增加间距。
这些类名中的“Begin”和“End”是依据文本方向而定的，例如在从左到右的语言环境中，“Begin”会对应左侧，而“End”则对应右侧。
举例说明 SAP UI5 预约义的 CSS Margin 类
以下是一个理论示例，展现如何应用 SAP UI5 的预约义 Margin 类来管制元素之间的间距。咱们将应用一个程度排列的两个按钮作为例子。
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="Margin Class Example">
<content>
<VBox>
<Button text="按钮 1" type="Emphasized" class="sapUiMarginEnd" press="onButtonPress" />
<Button text="按钮 2" type="Default" class="sapUiMarginBegin" press="onButtonPress" />
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>在下面的代码中，咱们创立了一个 VBox 容器，其中蕴含了两个按钮。第一个按钮利用了 sapUiMarginEnd 类，这将在按钮的右侧增加一些间距。第二个按钮利用了 sapUiMarginBegin 类，这将在按钮的左侧增加一些间距。通过利用这些 Margin 类，咱们能够实现按钮之间的适合间距，从而进步布局的好看性。
自定义 Margin 值
除了应用预约义的 Margin 类之外，您还能够依据须要自定义 Margin 的值。这能够通过编写本人的 CSS 规定来实现，或者在 SAP UI5 控件上间接利用内联款式。
<Button text="自定义 Margin" type="Transparent" style="margin-left: 20px; margin-right: 30px;" press="onButtonPress" />在上述代码中，咱们在一个按钮上利用了自定义的内联款式，应用 margin-left 和margin-right属性来指定左侧和右侧的间距值。
总结
SAP UI5 的预约义 CSS Margin 类使开发人员可能轻松地管制元素之间的间距，从而实现更好的布局和视觉效果。这些类是依据命名模式设计的，能够间接利用于 UI5 控件，无需编写自定义 CSS 代码。此外，您还能够依据须要自定义 Margin 值，通过内联款式或自定义 CSS 规定来实现。
