Skip to main content
Rivet Design System Indiana University

Spacing

Add, adjust, or remove margin and padding

Overview #

Use the spacing utilities to set an element’s margin and padding.

Examples #


Open in new window
Copy link to example 
<div class="rvt-p-all-xxs rvt-m-bottom-md rvt-border-all">xxs</div>
<div class="rvt-p-all-xs rvt-m-bottom-md rvt-border-all">xs</div>
<div class="rvt-p-all-sm rvt-m-bottom-md rvt-border-all">sm</div>
<div class="rvt-p-all-md rvt-m-bottom-md rvt-border-all">md</div>
<div class="rvt-p-all-lg rvt-m-bottom-md rvt-border-all">lg</div>
<div class="rvt-p-all-xl rvt-m-bottom-md rvt-border-all">xl</div>
<div class="rvt-p-all-xxl rvt-m-bottom-md rvt-border-all">xxl</div>
<div class="rvt-p-all-3-xl rvt-m-bottom-md rvt-border-all">3-xl</div>
<div class="rvt-p-all-4-xl rvt-m-bottom-md rvt-border-all">4-xl</div>
Open in new window
Copy link to example 
<div class="rvt-m-bottom-xxs rvt-p-all-sm rvt-border-all">xxs</div>
<div class="rvt-m-bottom-xs rvt-p-all-sm rvt-border-all">xs</div>
<div class="rvt-m-bottom-sm rvt-p-all-sm rvt-border-all">sm</div>
<div class="rvt-m-bottom-md rvt-p-all-sm rvt-border-all">md</div>
<div class="rvt-m-bottom-lg rvt-p-all-sm rvt-border-all">lg</div>
<div class="rvt-m-bottom-xl rvt-p-all-sm rvt-border-all">xl</div>
<div class="rvt-m-bottom-xxl rvt-p-all-sm rvt-border-all">xxl</div>
<div class="rvt-m-bottom-3-xl rvt-p-all-sm rvt-border-all">3-xl</div>
<div class="rvt-m-bottom-4-xl rvt-p-all-sm rvt-border-all">4-xl</div>
Open in new window
Copy link to example 
<div class="rvt-m-top-xl rvt-p-all-lg rvt-bg-black-100">
  <div class="-rvt-m-top-xxl rvt-p-all-lg rvt-bg-blue rvt-color-white">Negative top margin</div>
</div>
Open in new window
Copy link to example 
<div class="rvt-p-all-xs rvt-p-all-xxl-md-up rvt-border-all">
  <span>This box will have XXL padding on larger screens and XS padding on smaller screens.</span>
</div>
Open in new window
Copy link to example 
<div class="rvt-flow">
  <div class="rvt-p-all-lg rvt-border-all">
    Content section one
  </div>
  <div class="rvt-p-all-lg rvt-border-all">
    Content section two
  </div>
  <div class="rvt-p-all-lg rvt-border-all">
    Content section three
  </div>
</div>

Usage #

The CSS classes for the spacing system use the following format:

  • rvt = namespace
  • m, p = margin, padding
  • top, right, bottom, left = the top, right, bottom, left side of the element
  • tb = Top and bottom of the element (e.g. rvt-m-tb-xl)
  • lr = Left and right of the element (e.g. rvt-p-lr-md)
  • all = All sides of the element (e.g. rvt-p-all-lg)
  • xs = Extra Small (8px/.5rem)
  • sm = Small (16px/1rem)
  • md = Medium (24px/1.5rem)
  • lg = Large (32px/2rem)
  • xl = Extra large (40px/2.5rem)
  • xxl = Extra extra large (48px/3rem)
  • 3-xl = 3XL (128px/8rem)
  • 4-xl = 4XL (192px/12rem)
  • none = Remove margin/padding from any of the previous combinations

So the class .rvt-m-top-sm would add 16px/1rem of margin on all screen sizes to the top of the element it was applied to.

Negative margins #

With the exception of the .rvt-m-tb-* and .rvt-m-lr-* utilities, all margin utilities can be made negative by adding a minus sign (-) to the beginning of the class name:

<div class="-rvt-m-top-lg">
    <!-- Adds a negative top margin to the element -->
</div>

Responsive spacing #

Each spacing utility class also comes with a set of modifiers that allow you to adjust spacing at different screen sizes. Take the following div:

<div class="rvt-p-bottom-sm rvt-p-bottom-lg-lg-up">
    <!-- Markup -->
</div>

With these spacing classes applied, it would have 16px/1rem of bottom padding at all screen sizes and 32px/2rem of bottom padding on large screens (1080px wide) and up.

Automatic vertical spacing #

Add the .rvt-flow class to an element to apply consistent vertical spacing between each direct child of that element. This can be useful for pages on a website that have multiple content sections stacked one after another.

<div class="rvt-flow">
  <div class="rvt-container-lg"><!-- Content section --></div>
  <div class="rvt-container-lg"><!-- Content section --></div>
  <div class="rvt-container-lg"><!-- Content section --></div>
</div>

Spacing modifiers #

All spacing utilities described above have the following responsive modifiers available to them:

  • -sm-up - screens 480–740px and wider
  • -md-up - screens 740–1080px and wider
  • -lg-up - screens 1080–1260px and wider
  • -xl-up - screens 1260–1400px and wider
  • -xxl-up - screens 1400px and wider

Responsive removal of spacing #

Sometimes you may need to totally remove the margin or padding of an element at different screen sizes. The margin/padding removal utility classes use the following pattern:

.rvt-*1-none-*2-up

  • *1 = m (margin) or p (padding)
  • *2 = one of the following breakpoints sm, md, lg, xl, xxl