Spacing

Margin and padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Using the CSS Grid layout module? Consider using the gap utility instead.

Notation

The classes are named using the format {property}-{sides}-{size}.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
r - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
5 - (by default) for classes that set the margin or padding to 5px
10 - (by default) for classes that set the margin or padding to 10px
15 - (by default) for classes that set the margin or padding to 15px
20 - (by default) for classes that set the margin or padding to 20px
25 - (by default) for classes that set the margin or padding to 25px
30 - (by default) for classes that set the margin or padding to 30px
auto - for classes that set the margin to auto

Examples

Here are some representative examples of these classes:

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-5 {
  margin-left: 5px !important;
}

.p-x-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.p-15 {
  padding: 15px !important;
}

Horizontal centering

Additionally, WUI also includes an .m-auto class for centering fixed-width block level content—that is, content that has display: block and a width set—by setting the margins to auto.

Centered element

<div class="m-auto p-10 wui-bg-color--active-20 border-1 wui-border-color--active" style="width: 200px;">
  Centered element
</div>

Negative margin

In CSS, margin properties can utilize negative values (padding cannot).

The syntax is nearly the same as the default, positive margin utilities, but with the addition of a second - after the property abbreviation. We only support -1px and -5px. Here's an example class that's the opposite of .m-t-5:

.m-t--5 {
  margin-top: -5px !important;
}

Typical use cases

Generally we work in a grid with 10px spacing. The arrangement of multiple elements often involves a combination with flex utils.

Scene header

Cancel

Primary button

Panel header

Secondary button

Modal footer

<h4 class="m-b-30">Scene header</h4>
<div class="d-flex justify-content-end">
  <wui-button variant="link">Cancel</wui-button>
  <wui-button v-w-tooltip.hover title="Delete xyz" class="m-r-10" variant="default" :outline="true">
    <i class="fa-solid fa-trash"></i>
  </wui-button>
  <wui-button variant="primary">Primary button</wui-button>
</div>
<hr class="m-y-20">
<h4 class="m-b-30">Panel header</h4>
<div class="d-flex justify-content-end">
  <wui-button variant="primary" :outline="true" class="m-r-10">Secondary button</wui-button>
  <wui-quick-pagination
    :limit="1"
    :total-rows="5"
    :change="undefined"
    :update:model-value="undefined"
  />
</div>
<hr class="m-y-20">
<h4 class="m-b-30">Modal footer</h4>
<div class="d-flex justify-content-between">
  <ul class="wui-pagination-v2 wui-b-pagination m-b-0">
    <li role="presentation" aria-hidden="true" class="wui-page__item wui-page__item--disabled">
      <span role="menuitem" aria-label="Go to previous page" aria-disabled="true" class="wui-page__link">
        <i aria-hidden="true" class="fa fa-chevron-left"></i></span></li>
    <li role="presentation" class="wui-page__item">
      <button role="menuitemradio" type="button" aria-label="Go to page 1" aria-checked="false" aria-posinset="1" aria-setsize="10" tabindex="0" class="wui-page__link">1</button>
    </li>
    <li role="presentation" class="wui-page__item">
      <button role="menuitemradio" type="button" aria-label="Go to page 2" aria-checked="false" aria-posinset="2" aria-setsize="10" tabindex="-1" class="wui-page__link">2</button>
    </li>
    <li role="presentation" class="wui-page__item">
      <button role="menuitemradio" type="button" aria-label="Go to page 3" aria-checked="false" aria-posinset="3" aria-setsize="10" tabindex="-1" class="wui-page__link">3</button>
    </li>
    <li role="presentation" class="wui-page__item wv-d-xs-down-none">
      <button role="menuitemradio" type="button" aria-label="Go to page 4" aria-checked="false" aria-posinset="4" aria-setsize="10" tabindex="-1" class="wui-page__link">4</button>
    </li>
    <li role="separator" class="wui-page__item wui-page__item--disabled wv-d-xs-down-none">
      <span class="wui-page__link">…</span></li>
    <li role="presentation" aria-hidden="true" class="wui-page__item wui-page__item--disabled">
      <span role="menuitem" aria-label="Go to next page" aria-disabled="true" class="wui-page__link">
        <i aria-hidden="true" class="fa fa-chevron-right"></i>
      </span>
    </li>
  </ul>
  <div>
    <button type="button" class="wui-btn wui-btn--link">Cancel</button>
    <button type="button" class="wui-btn wui-btn--primary">Primary button</button>
  </div>
</div>

From WUI and

with

WUI is wescale’s design system