Skip to main content

Margin

Use margin utility classes to set margins on all sides, horizontally, vertically, or in individual directions.

Usage​

Margin enums are defined numerically between 0.25em and 4em (following the same sliding scale as dimension enums), with the addition of the none and the auto enums.

tip

The auto enum is useful for resetting an existing value or for centering elements in a flex layout.

Margin - All sides​

Compose margin utility classes for all sides as:

margin--[enum]

Margin - Horizontal​

Compose horizontal margin utility classes as:

margin-h--[enum]

Margin - Vertical​

Compose vertical margin utility classes as:

margin-v--[enum]

Margin - Left​

Compose left margin utility classes as:

margin-l--[enum]

Margin - Top​

Compose horizontal margin utility classes as:

margin-t--[enum]

Margin - Right​

Compose horizontal margin utility classes as:

margin-r--[enum]

Margin - Bottom​

Compose horizontal margin utility classes as:

margin-b--[enum]