Margin

Margin

Adjust whitespace with horizontal and vertical spacing helpers

Margin: Top

Preview

No content has been added for this component.

No content has been added for this component.

About Margin

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 /components/utilities/media-objects/#center instead of applying extra margin or padding.

Overview of CSS Classes

Selector.slds-m-*_xxx-small
Summary

Adds .125rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_xx-small
Summary

Adds .25rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_x-small
Summary

Adds .5rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_small
Summary

Adds .75rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_medium
Summary

Adds 1rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_large
Summary

Adds 1.5rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_x-large
Summary

Adds 2rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*_xx-large
Summary

Adds 3rem margin to the side specified

Restrict*
ModifierTrue
Selector.slds-m-*-vertical_*
Summary

Adds the specified margin to both top and bottom

Restrict*
ModifierTrue
Selector.slds-m-*-horizontal_*
Summary

Adds the specified margin to both sides

Restrict*
ModifierTrue
Selector.slds-m-*-around_*
Summary

Adds the specified margin all the way around the element

Restrict*
ModifierTrue