Spacer

This modifier adds margin or padding spacer around an element.

ATTENTION We use the logical block start and end for margins/paddings of an element, which maps to physical margins/padding depending on the element’s writing mode, directionality, and text orientation. For more Information read CSS Logical Properties.

The structure of the class names are:

• .{PROPERTY}-{DIMENSION}
• .{PROPERTY}-{DIMENSION}-{SCREEN_SIZE} until the screen size
• .{PROPERTY}-{DIRECTION}-{DIMENSION}
• .{PROPERTY}-{DIRECTION}-{DIMENSION}-{SCREEN_SIZE} until the screen size

The values are:

• PROPERTY margin, padding
• DIRECTION top, end, bottom, start, vertical, horizontal
• DIMENSION auto, 0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00
• SCREEN_SIZE lg, md, sm, xs

Margin

In the following we show a few examples of how to use the global margin modifiers.

Padding

In the following we show a few examples of how to use the global padding modifiers.