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.

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

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