Classes
Margins can be placed at any side of an element, top, bottom, left or right. Use our predefined margin classes to quickly add consistent spacing between elements in the interface.
Top Margin
| Class | Value (px) | | .l-margin-top--none | 0 |
| .l-margin-top--xxxsmall | 2 |
| .l-margin-top--xxsmall | 4 |
| .l-margin-top--xsmall | 8 |
| .l-margin-top--small | 12 |
| .l-margin-top--medium | 16 |
| .l-margin-top--large | 24 |
| .l-margin-top--xlarge | 32 |
| .l-margin-top--xxlarge | 48 |
| .l-margin-top--xxxlarge | 64 |
Bottom Margin
| Class | Value (px) | | .l-margin-bottom--none | 0 |
| .l-margin-bottom--xxxsmall | 2 |
| .l-margin-bottom--xxsmall | 4 |
| .l-margin-bottom--xsmall | 8 |
| .l-margin-bottom--small | 12 |
| .l-margin-bottom--medium | 16 |
| .l-margin-bottom--large | 24 |
| .l-margin-bottom--xlarge | 32 |
| .l-margin-bottom--xxlarge | 48 |
| .l-margin-bottom--xxxlarge | 64 |
Left Margin
| Class | Value (px) | | .l-margin-left--none | 0 |
| .l-margin-left--xxxsmall | 2 |
| .l-margin-left--xxsmall | 4 |
| .l-margin-left--xsmall | 8 |
| .l-margin-left--small | 12 |
| .l-margin-left--medium | 16 |
| .l-margin-left--large | 24 |
| .l-margin-left--xlarge | 32 |
| .l-margin-left--xxlarge | 48 |
| .l-margin-left--xxxlarge | 64 |
Right Margin
| Class | Value (px) | | .l-margin-right--none | 0 |
| .l-margin-right--xxxsmall | 2 |
| .l-margin-right--xxsmall | 4 |
| .l-margin-right--xsmall | 8 |
| .l-margin-right--small | 12 |
| .l-margin-right--medium | 16 |
| .l-margin-right--large | 24 |
| .l-margin-right--xlarge | 32 |
| .l-margin-right--xxlarge | 48 |
| .l-margin-right--xxxlarge | 64 |
Vertical Margin
| Class | Value (px) | | .l-margin-vertical--none | 0 |
| .l-margin-vertical--xxxsmall | 2 |
| .l-margin-vertical--xxsmall | 4 |
| .l-margin-vertical--xsmall | 8 |
| .l-margin-vertical--small | 12 |
| .l-margin-vertical--medium | 16 |
| .l-margin-vertical--large | 24 |
| .l-margin-vertical--xlarge | 32 |
| .l-margin-vertical--xxlarge | 48 |
| .l-margin-vertical--xxxlarge | 64 |
Horizontal Margin
| Class | Value (px) | | .l-margin-horizontal--none | 0 |
| .l-margin-horizontal--xxxsmall | 2 |
| .l-margin-horizontal--xxsmall | 4 |
| .l-margin-horizontal--xsmall | 8 |
| .l-margin-horizontal--small | 12 |
| .l-margin-horizontal--medium | 16 |
| .l-margin-horizontal--large | 24 |
| .l-margin-horizontal--xlarge | 32 |
| .l-margin-horizontal--xxlarge | 48 |
| .l-margin-horizontal--xxxlarge | 64 |
Switch to M&T