Spacing - Utilities

Use following classes to add extra spacing.

Examples display outside spacing (margin) on the left and inside spacing (padding) on the right.

All around spacing

ecl-u-ma-2xs

ecl-u-pa-2xs

ecl-u-ma-xs

ecl-u-pa-xs

ecl-u-ma-s

ecl-u-pa-s

ecl-u-ma-m

ecl-u-pa-m

ecl-u-ma-l

ecl-u-pa-l

ecl-u-ma-xl

ecl-u-pa-xl

ecl-u-ma-2xl

ecl-u-pa-2xl

ecl-u-ma-3xl

ecl-u-pa-3xl

ecl-u-ma-4xl

ecl-u-pa-4xl

ecl-u-ma-5xl

ecl-u-pa-5xl

ecl-u-ma-6xl

ecl-u-pa-6xl

Fullscreen

<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-2xs"><span class="demo-spacing-item">ecl-u-ma-2xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-2xs"><span>ecl-u-pa-2xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-xs"><span class="demo-spacing-item">ecl-u-ma-xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-xs"><span>ecl-u-pa-xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-s"><span class="demo-spacing-item">ecl-u-ma-s</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-s"><span>ecl-u-pa-s</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-m"><span class="demo-spacing-item">ecl-u-ma-m</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-m"><span>ecl-u-pa-m</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-l"><span class="demo-spacing-item">ecl-u-ma-l</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-l"><span>ecl-u-pa-l</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-xl"><span class="demo-spacing-item">ecl-u-ma-xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-xl"><span>ecl-u-pa-xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-2xl"><span class="demo-spacing-item">ecl-u-ma-2xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-2xl"><span>ecl-u-pa-2xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-3xl"><span class="demo-spacing-item">ecl-u-ma-3xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-3xl"><span>ecl-u-pa-3xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-4xl"><span class="demo-spacing-item">ecl-u-ma-4xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-4xl"><span>ecl-u-pa-4xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-5xl"><span class="demo-spacing-item">ecl-u-ma-5xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-5xl"><span>ecl-u-pa-5xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ma-6xl"><span class="demo-spacing-item">ecl-u-ma-6xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pa-6xl"><span>ecl-u-pa-6xl</span></div>
  </div>
</div>

Try it yourself on the playground

Playground

Vertical spacing

ecl-u-mv-2xs

ecl-u-pv-2xs

ecl-u-mv-xs

ecl-u-pv-xs

ecl-u-mv-s

ecl-u-pv-s

ecl-u-mv-m

ecl-u-pv-m

ecl-u-mv-l

ecl-u-pv-l

ecl-u-mv-xl

ecl-u-pv-xl

ecl-u-mv-2xl

ecl-u-pv-2xl

ecl-u-mv-3xl

ecl-u-pv-3xl

ecl-u-mv-4xl

ecl-u-pv-4xl

ecl-u-mv-5xl

ecl-u-pv-5xl

ecl-u-mv-6xl

ecl-u-pv-6xl

Fullscreen

<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-2xs"><span class="demo-spacing-item">ecl-u-mv-2xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-2xs"><span>ecl-u-pv-2xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-xs"><span class="demo-spacing-item">ecl-u-mv-xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-xs"><span>ecl-u-pv-xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-s"><span class="demo-spacing-item">ecl-u-mv-s</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-s"><span>ecl-u-pv-s</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-m"><span class="demo-spacing-item">ecl-u-mv-m</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-m"><span>ecl-u-pv-m</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-l"><span class="demo-spacing-item">ecl-u-mv-l</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-l"><span>ecl-u-pv-l</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-xl"><span class="demo-spacing-item">ecl-u-mv-xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-xl"><span>ecl-u-pv-xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-2xl"><span class="demo-spacing-item">ecl-u-mv-2xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-2xl"><span>ecl-u-pv-2xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-3xl"><span class="demo-spacing-item">ecl-u-mv-3xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-3xl"><span>ecl-u-pv-3xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-4xl"><span class="demo-spacing-item">ecl-u-mv-4xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-4xl"><span>ecl-u-pv-4xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-5xl"><span class="demo-spacing-item">ecl-u-mv-5xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-5xl"><span>ecl-u-pv-5xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mv-6xl"><span class="demo-spacing-item">ecl-u-mv-6xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-pv-6xl"><span>ecl-u-pv-6xl</span></div>
  </div>
</div>

Try it yourself on the playground

Playground

Directional vertical spacing

use classes ecl-u-mt-* or ecl-u-pt-* to add spacing only on top
use classes ecl-u-mb-* or ecl-u-pb-* to add spacing below.

Horizontal spacing

ecl-u-mh-2xs

ecl-u-ph-2xs

ecl-u-mh-xs

ecl-u-ph-xs

ecl-u-mh-s

ecl-u-ph-s

ecl-u-mh-m

ecl-u-ph-m

ecl-u-mh-l

ecl-u-ph-l

ecl-u-mh-xl

ecl-u-ph-xl

ecl-u-mh-2xl

ecl-u-ph-2xl

ecl-u-mh-3xl

ecl-u-ph-3xl

ecl-u-mh-4xl

ecl-u-ph-4xl

ecl-u-mh-5xl

ecl-u-ph-5xl

ecl-u-mh-6xl

ecl-u-ph-6xl

Fullscreen

<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-2xs"><span class="demo-spacing-item">ecl-u-mh-2xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-2xs"><span>ecl-u-ph-2xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-xs"><span class="demo-spacing-item">ecl-u-mh-xs</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-xs"><span>ecl-u-ph-xs</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-s"><span class="demo-spacing-item">ecl-u-mh-s</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-s"><span>ecl-u-ph-s</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-m"><span class="demo-spacing-item">ecl-u-mh-m</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-m"><span>ecl-u-ph-m</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-l"><span class="demo-spacing-item">ecl-u-mh-l</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-l"><span>ecl-u-ph-l</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-xl"><span class="demo-spacing-item">ecl-u-mh-xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-xl"><span>ecl-u-ph-xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-2xl"><span class="demo-spacing-item">ecl-u-mh-2xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-2xl"><span>ecl-u-ph-2xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-3xl"><span class="demo-spacing-item">ecl-u-mh-3xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-3xl"><span>ecl-u-ph-3xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-4xl"><span class="demo-spacing-item">ecl-u-mh-4xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-4xl"><span>ecl-u-ph-4xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-5xl"><span class="demo-spacing-item">ecl-u-mh-5xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-5xl"><span>ecl-u-ph-5xl</span></div>
  </div>
</div>
<div class="demo-spacing-line">
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-mh-6xl"><span class="demo-spacing-item">ecl-u-mh-6xl</span></div>
  </div>
  <div class="demo-spacing-container">
    <div class="demo-spacing-content ecl-u-ph-6xl"><span>ecl-u-ph-6xl</span></div>
  </div>
</div>

Try it yourself on the playground

Playground

Directional horizontal spacing

use classes ecl-u-ml-* or ecl-u-pl-* to add spacing only on the start
use classes ecl-u-mr-* or ecl-u-pr-* to add spacing on the end

Other spacing

use classes ecl-u-m*-auto to set margin auto (horizontal, vertical or any direction)
use classes ecl-u-m*-none or ecl-u-p*-none to set margin or padding to zero.

Responsive spacing

Add the breakpoint before spacing size to display it only with corresponding screen size (works for all kind of spacing ahead).

Examples:

spacing l on screen size >= breakpoint m
ecl-u-ma-m-l
ecl-u-pa-m-l
horizontal spacing 2xl on screen size >= breakpoint l
ecl-u-mh-l-2xl
ecl-u-ph-l-2xl
no left spacing on screen size >= breakpoint s
ecl-u-ml-s-none
ecl-u-pl-s-none