Switch to M&T
Overview

Margin

Margins are the space between an element and its environment.

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

ClassValue (px)
.l-margin-top--none0
.l-margin-top--xxxsmall2
.l-margin-top--xxsmall4
.l-margin-top--xsmall8
.l-margin-top--small12
.l-margin-top--medium16
.l-margin-top--large24
.l-margin-top--xlarge32
.l-margin-top--xxlarge48
.l-margin-top--xxxlarge64

Bottom Margin

ClassValue (px)
.l-margin-bottom--none0
.l-margin-bottom--xxxsmall2
.l-margin-bottom--xxsmall4
.l-margin-bottom--xsmall8
.l-margin-bottom--small12
.l-margin-bottom--medium16
.l-margin-bottom--large24
.l-margin-bottom--xlarge32
.l-margin-bottom--xxlarge48
.l-margin-bottom--xxxlarge64

Left Margin

ClassValue (px)
.l-margin-left--none0
.l-margin-left--xxxsmall2
.l-margin-left--xxsmall4
.l-margin-left--xsmall8
.l-margin-left--small12
.l-margin-left--medium16
.l-margin-left--large24
.l-margin-left--xlarge32
.l-margin-left--xxlarge48
.l-margin-left--xxxlarge64

Right Margin

ClassValue (px)
.l-margin-right--none0
.l-margin-right--xxxsmall2
.l-margin-right--xxsmall4
.l-margin-right--xsmall8
.l-margin-right--small12
.l-margin-right--medium16
.l-margin-right--large24
.l-margin-right--xlarge32
.l-margin-right--xxlarge48
.l-margin-right--xxxlarge64

Vertical Margin

ClassValue (px)
.l-margin-vertical--none0
.l-margin-vertical--xxxsmall2
.l-margin-vertical--xxsmall4
.l-margin-vertical--xsmall8
.l-margin-vertical--small12
.l-margin-vertical--medium16
.l-margin-vertical--large24
.l-margin-vertical--xlarge32
.l-margin-vertical--xxlarge48
.l-margin-vertical--xxxlarge64

Horizontal Margin

ClassValue (px)
.l-margin-horizontal--none0
.l-margin-horizontal--xxxsmall2
.l-margin-horizontal--xxsmall4
.l-margin-horizontal--xsmall8
.l-margin-horizontal--small12
.l-margin-horizontal--medium16
.l-margin-horizontal--large24
.l-margin-horizontal--xlarge32
.l-margin-horizontal--xxlarge48
.l-margin-horizontal--xxxlarge64