与 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规定来实现。