Components › Utilities

Spacing

MarginMargindev ready

Preview

Code

<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>
<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>
<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>
<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>
<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>
<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>
<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>

PaddingPaddingdev ready

Preview

Code

<div class="slds-p-top--none"></div>
<div class="slds-p-top--xxx-small"></div>
<div class="slds-p-top--xx-small"></div>
<div class="slds-p-top--x-small"></div>
<div class="slds-p-top--small"></div>
<div class="slds-p-top--medium"></div>
<div class="slds-p-top--large"></div>
<div class="slds-p-top--x-large"></div>
<div class="slds-p-top--xx-large"></div>
<div class="slds-p-right--none"></div>
<div class="slds-p-right--xxx-small"></div>
<div class="slds-p-right--xx-small"></div>
<div class="slds-p-right--x-small"></div>
<div class="slds-p-right--small"></div>
<div class="slds-p-right--medium"></div>
<div class="slds-p-right--large"></div>
<div class="slds-p-right--x-large"></div>
<div class="slds-p-right--xx-large"></div>
<div class="slds-p-bottom--none"></div>
<div class="slds-p-bottom--xxx-small"></div>
<div class="slds-p-bottom--xx-small"></div>
<div class="slds-p-bottom--x-small"></div>
<div class="slds-p-bottom--small"></div>
<div class="slds-p-bottom--medium"></div>
<div class="slds-p-bottom--large"></div>
<div class="slds-p-bottom--x-large"></div>
<div class="slds-p-bottom--xx-large"></div>
<div class="slds-p-left--none"></div>
<div class="slds-p-left--xxx-small"></div>
<div class="slds-p-left--xx-small"></div>
<div class="slds-p-left--x-small"></div>
<div class="slds-p-left--small"></div>
<div class="slds-p-left--medium"></div>
<div class="slds-p-left--large"></div>
<div class="slds-p-left--x-large"></div>
<div class="slds-p-left--xx-large"></div>
<div class="slds-p-vertical--none"></div>
<div class="slds-p-vertical--xxx-small"></div>
<div class="slds-p-vertical--xx-small"></div>
<div class="slds-p-vertical--x-small"></div>
<div class="slds-p-vertical--small"></div>
<div class="slds-p-vertical--medium"></div>
<div class="slds-p-vertical--large"></div>
<div class="slds-p-vertical--x-large"></div>
<div class="slds-p-vertical--xx-large"></div>
<div class="slds-p-horizontal--none"></div>
<div class="slds-p-horizontal--xxx-small"></div>
<div class="slds-p-horizontal--xx-small"></div>
<div class="slds-p-horizontal--x-small"></div>
<div class="slds-p-horizontal--small"></div>
<div class="slds-p-horizontal--medium"></div>
<div class="slds-p-horizontal--large"></div>
<div class="slds-p-horizontal--x-large"></div>
<div class="slds-p-horizontal--xx-large"></div>
<div class="slds-p-around--none"></div>
<div class="slds-p-around--xxx-small"></div>
<div class="slds-p-around--xx-small"></div>
<div class="slds-p-around--x-small"></div>
<div class="slds-p-around--small"></div>
<div class="slds-p-around--medium"></div>
<div class="slds-p-around--large"></div>
<div class="slds-p-around--x-large"></div>
<div class="slds-p-around--xx-large"></div>

Component Overview

Spacing indicates margin and padding. The base unit of all our spacing metrics is 4.

  • 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.
  • Where vertical centering is required, check out our centered media object instead of applying extra margin or padding.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component. An * represents the portion of the class that can differ — such as .slds-p-around and .slds-m-bottom.
Class NameUsage
.slds-'*--none'
Applied to:

any element

Outcome:

Adds 0 margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--xxx-small'
Applied to:

any element

Outcome:

Adds .125rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--xx-small'
Applied to:

any element

Outcome:

Adds .25rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--x-small'
Applied to:

any element

Outcome:

Adds .5rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--small'
Applied to:

any element

Outcome:

Adds .75rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--medium'
Applied to:

any element

Outcome:

Adds 1rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--large'
Applied to:

any element

Outcome:

Adds 1.5rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--x-large'
Applied to:

any element

Outcome:

Adds 2rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*--xx-large'
Applied to:

any element

Outcome:

Adds 3rem margin or padding to the side specified

Required:

No, optional element or modifier

Comments:

--

.slds-'*-vertical--*'
Applied to:

any element

Outcome:

Adds the specified margin or padding to both top and bottom

Required:

No, optional element or modifier

Comments:

--

.slds-'*-horizontal--*'
Applied to:

any element

Outcome:

Adds the specified margin or padding to both sides

Required:

No, optional element or modifier

Comments:

--

.slds-'*-around--*'
Applied to:

any element

Outcome:

Adds the specified margin or padding all the way around the element

Required:

No, optional element or modifier

Comments:

--