/ margins

Changing margins with UI5 standard classes

Since the UI5 framework is built on standard web technology, we can use custom stylesheets to change the way applications look. When we want to add some additonal margin to a control, we could do the following:

<VBox class="myCustomClass">
	<Text text="My textbox" />
</VBox>
.myCustomClass {
    margin: 15px;
}

While I dont see anything wrong with defining custom stylesheets, it would be preferable to use standard classes when provided by the framework. Since the standard classes are widely used, they will be easily recognisible by other developers, and will be supported by future versions of UI5.

<VBox class="sapUiSmallMargin" width="auto">
	<Text text="My textbox" />
</VBox>

In the example above we use the default sapUiSmallMargin class. This will add 16 pixels of margin around the entire control. There are also classes for only adding margin on a particular side. For example, if we only want to add margin to the top of the control:

<VBox class="sapUiSmallMarginTop">
	<Text text="My textbox" />
</VBox>

Or on the right side of the control:

<VBox class="sapUiSmallMarginEnd" width="auto">
	<Text text="My textbox" />
</VBox>

Note how we added width="auto" here. This is because if a control uses 100% of the available width, and also has a horizontal margin, a scrollbar would be displayed. By adding width="auto" we make sure the width is nicely resolved.

The four margin sizes:
sapUiTinyMargin - 0.5 rem / 8px
sapUiSmallMargin - 1 rem / 16px
sapUiMediumMargin - 2 rem / 32px
sapUiLargeMargin - 3 rem / 48px

Changing margins with UI5 standard classes
Share this