Adjust whitespace by applying horizontal and vertical margin helpers

About Margin#

The base unit of all of our spacing metrics is 4.

Before using

Most components already come with spacing included. These utility classes are for added convenience in laying out components.
Classes prefixed by slds-m- are used for adding margins. Classes prefixed in slds-p- are used for adding padding
The directions available for the spacing classes are top, right, bottom, and left.
You can use the vertical shortcut for both top and bottom, horizontal for both right and left, and around for all sides.
Use the _xxx-small through _xx-large scale to choose the size needed.
You can also use none as the size on any of the directions to enforce zero margin.
Where vertical centering is required, check out our centered media object instead of applying extra margin or padding.

Examples#

Location - Top#

<div class="slds-m-top_none"></div>

<div class="slds-m-top_xxx-small"></div>

<div class="slds-m-top_xx-small"></div>

<div class="slds-m-top_x-small"></div>

<div class="slds-m-top_small"></div>

<div class="slds-m-top_medium"></div>

<div class="slds-m-top_large"></div>

<div class="slds-m-top_x-large"></div>

<div class="slds-m-top_xx-large"></div>

Location - Left#

<div class="slds-m-left_none"></div>

<div class="slds-m-left_xxx-small"></div>

<div class="slds-m-left_xx-small"></div>

<div class="slds-m-left_x-small"></div>

<div class="slds-m-left_small"></div>

<div class="slds-m-left_medium"></div>

<div class="slds-m-left_large"></div>

<div class="slds-m-left_x-large"></div>

<div class="slds-m-left_xx-large"></div>

Location - Bottom#

<div class="slds-m-bottom_none"></div>

<div class="slds-m-bottom_xxx-small"></div>

<div class="slds-m-bottom_xx-small"></div>

<div class="slds-m-bottom_x-small"></div>

<div class="slds-m-bottom_small"></div>

<div class="slds-m-bottom_medium"></div>

<div class="slds-m-bottom_large"></div>

<div class="slds-m-bottom_x-large"></div>

<div class="slds-m-bottom_xx-large"></div>

Location - Right#

<div class="slds-m-right_none"></div>

<div class="slds-m-right_xxx-small"></div>

<div class="slds-m-right_xx-small"></div>

<div class="slds-m-right_x-small"></div>

<div class="slds-m-right_small"></div>

<div class="slds-m-right_medium"></div>

<div class="slds-m-right_large"></div>

<div class="slds-m-right_x-large"></div>

<div class="slds-m-right_xx-large"></div>

Location - Horizontal#

<div class="slds-m-horizontal_none"></div>

<div class="slds-m-horizontal_xxx-small"></div>

<div class="slds-m-horizontal_xx-small"></div>

<div class="slds-m-horizontal_x-small"></div>

<div class="slds-m-horizontal_small"></div>

<div class="slds-m-horizontal_medium"></div>

<div class="slds-m-horizontal_large"></div>

<div class="slds-m-horizontal_x-large"></div>

<div class="slds-m-horizontal_xx-large"></div>

Location - Vertical#

<div class="slds-m-vertical_none"></div>

<div class="slds-m-vertical_xxx-small"></div>

<div class="slds-m-vertical_xx-small"></div>

<div class="slds-m-vertical_x-small"></div>

<div class="slds-m-vertical_small"></div>

<div class="slds-m-vertical_medium"></div>

<div class="slds-m-vertical_large"></div>

<div class="slds-m-vertical_x-large"></div>

<div class="slds-m-vertical_xx-large"></div>

Location - Around#

<div class="slds-m-around_none"></div>

<div class="slds-m-around_xxx-small"></div>

<div class="slds-m-around_xx-small"></div>

<div class="slds-m-around_x-small"></div>

<div class="slds-m-around_small"></div>

<div class="slds-m-around_medium"></div>

<div class="slds-m-around_large"></div>

<div class="slds-m-around_x-large"></div>

<div class="slds-m-around_xx-large"></div>

Variable Density Classes#

In addition to the tokens we've created to support the new density settings, we have also created variable density classes for both margin and padding. The tables below show how the values change between the Comfy and Compact settings.

Around#

Class Name	Comfy Value	Compact Value
`slds-var-m-around_xxx-small`	0.125rem	0.125rem
`slds-var-m-around_xx-small`	0.25rem	0.125rem
`slds-var-m-around_x-small`	0.5rem	0.125rem
`slds-var-m-around_small`	0.75rem	0.25rem
`slds-var-m-around_medium`	1rem	0.5rem
`slds-var-m-around_large`	1.5rem	0.75rem
`slds-var-m-around_x-large`	2rem	1rem
`slds-var-m-around_xx-large`	3rem	1.5rem

Left, Right, Horizontal#

Class Name	Comfy Value	Compact Value
`slds-var-m-*_xxx-small`	0.125rem	0.125rem
`slds-var-m-*_xx-small`	0.25rem	0.125rem
`slds-var-m-*_x-small`	0.5rem	0.25rem
`slds-var-m-*_small`	0.75rem	0.5rem
`slds-var-m-*_medium`	1rem	0.75rem
`slds-var-m-*_large`	1.5rem	0.75rem
`slds-var-m-*_x-large`	2rem	1rem
`slds-var-m-*_xx-large`	3rem	1.5rem

Top, Bottom, Vertical#

Class Name	Comfy Value	Compact Value
`slds-var-m-*_xxx-small`	0.125rem	0.125rem
`slds-var-m-*_xx-small`	0.25rem	0.125rem
`slds-var-m-*_x-small`	0.5rem	0.25rem
`slds-var-m-*_small`	0.75rem	0.5rem
`slds-var-m-*_medium`	1rem	0.5rem
`slds-var-m-*_large`	1.5rem	0.75rem
`slds-var-m-*_x-large`	2rem	1rem
`slds-var-m-*_xx-large`	3rem	1.5rem

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-m-_xxx-small, .slds-var-m-_xxx-small`
Summary	Adds .125rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_xx-small, .slds-var-m-_xx-small`
Summary	Adds .25rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_x-small, .slds-var-m-_x-small`
Summary	Adds .5rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_small, .slds-var-m-_small`
Summary	Adds .75rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_medium, .slds-var-m-_medium`
Summary	Adds 1rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_large, .slds-var-m-_large`
Summary	Adds 1.5rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_x-large, .slds-var-m-_x-large`
Summary	Adds 2rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m-_xx-large, .slds-var-m-_xx-large`
Summary	Adds 3rem margin to the side specified
Restrict	`*`
Modifier	True

Selector	`.slds-m--vertical_, .slds-var-m--vertical_`
Summary	Adds the specified margin to both top and bottom
Restrict	`*`
Modifier	True

Selector	`.slds-m--horizontal_, .slds-var-m--horizontal_`
Summary	Adds the specified margin to both sides
Restrict	`*`
Modifier	True

Selector	`.slds-m--around_, .slds-var-m--around_`
Summary	Adds the specified margin all the way around the element
Restrict	`*`
Modifier	True

Margin Utility Release Notes

2.8.0

Added

Added documentation detailing the values of the variable density classes in Comfy and Compact modes

Sections