O3 World Component Library

Spacing 

<!-- All markup in this file is FPO -->

<h2>Margin:</h2>

<div class="style-guide__spacing-container">
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
        <div class="style-guide__spacing-item u-flex-center u-margin-md">Margin</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
        <div class="style-guide__spacing-item u-flex-center u-margin-top-md">Margin top</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
        <div class="style-guide__spacing-item u-flex-center u-margin-right-md">Margin right</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
        <div class="style-guide__spacing-item u-flex-center u-margin-bottom-md">Margin bottom</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
        <div class="style-guide__spacing-item u-flex-center u-margin-left-md">Margin left</div>
    </div>
</div>

<h2>Padding:</h2>

<div class="style-guide__spacing-container">
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-sm">
        <div class="style-guide__spacing-item u-flex-center">Padding Small</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-md">
        <div class="style-guide__spacing-item u-flex-center">Padding Medium</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-lg">
        <div class="style-guide__spacing-item u-flex-center">Padding Large</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-top-md">
        <div class="style-guide__spacing-item u-flex-center">Padding top</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-right-md">
        <div class="style-guide__spacing-item u-flex-center">Padding right</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-bottom-md">
        <div class="style-guide__spacing-item u-flex-center">Padding bottom</div>
    </div>
    <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-left-md">
        <div class="style-guide__spacing-item u-flex-center">Padding left</div>
    </div>
</div>
 
<!-- All markup in this file is FPO -->

<h2>Margin:</h2>

<div class="style-guide__spacing-container">
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
    <div class="style-guide__spacing-item u-flex-center u-margin-md">Margin</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
    <div class="style-guide__spacing-item u-flex-center u-margin-top-md">Margin top</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
    <div class="style-guide__spacing-item u-flex-center u-margin-right-md">Margin right</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
    <div class="style-guide__spacing-item u-flex-center u-margin-bottom-md">Margin bottom</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--margin">
    <div class="style-guide__spacing-item u-flex-center u-margin-left-md">Margin left</div>
  </div>
</div>

<h2>Padding:</h2>

<div class="style-guide__spacing-container">
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-sm">
    <div class="style-guide__spacing-item u-flex-center">Padding Small</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-md">
    <div class="style-guide__spacing-item u-flex-center">Padding Medium</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-lg">
    <div class="style-guide__spacing-item u-flex-center">Padding Large</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-top-md">
    <div class="style-guide__spacing-item u-flex-center">Padding top</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-right-md">
    <div class="style-guide__spacing-item u-flex-center">Padding right</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-bottom-md">
    <div class="style-guide__spacing-item u-flex-center">Padding bottom</div>
  </div>
  <div class="style-guide__spacing-item-container style-guide__spacing-item-container--padding u-padding-left-md">
    <div class="style-guide__spacing-item u-flex-center">Padding left</div>
  </div>
</div>
 
/* No context defined for this component. */

Usage

Spacing utility classes are used to standardize margin in padding in a centralized lcoation. Each class, .u-margin and .u-padding, has eight modifier classes that handle both direction (top, right, bottom, and left) and size (small, medium, large, and extra large).

If just a size is used as a modifier, the margin or padding will be applied to all sides. If the intention is to add margin or padding to a specific side, the direction modifier, (e.g. -left), should be applied before the size modifer, (e.g -md). The end result would look like this: u-margin-left-md.

Spacing Utility Classes

  • The base margin class is .u-margin.
  • The base padding class is .u-padding.
  • For directional modifiers, both parent classes have access to the -top, -right, -bottom, and -left modifiers.
  • For size modifiers, both parent classes have access to the -sm, -md, -lg, and -xl modifiers.