Margin

Documentation • Demo

Ready

Margin utilities

Use the following classes to quickly set a margin:

ecl-u-ma-xxl: Extra extra large margin
ecl-u-ma-xl: Extra large margin
ecl-u-ma-l: Large margin
ecl-u-ma-m: Medium margin
ecl-u-ma-s: Small margin
ecl-u-ma-xs: Extra small margin
ecl-u-ma-xxs: Extra extra small margin

You can also set a specific margin (top, right bottom, left, horizontal, vertical), and/or a specific breakpoint.

See examples for more information.

View
Context
HTML
Code
Info


        <style>
  .exampleContainer {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
  }
  .exampleContainerAuto {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
    width: 225px;
    height: 100px;
  }
  .example {
    background-color: #404040;
    color: #fff;
    display: inline-block;
  }
  .exampleAuto {
    background-color: #404040;
    color: #fff;
    display: block;
    width: 150px;
    height: 100%;
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">Margin all</h3>
<div class="exampleContainer"><div class="example ecl-u-ma-none">ecl-u-ma-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-xxs">ecl-u-ma-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-xs">ecl-u-ma-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-s">ecl-u-ma-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-m">ecl-u-ma-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-l">ecl-u-ma-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-xl">ecl-u-ma-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-xxl">ecl-u-ma-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin horizontal</h3>
<div class="exampleContainer"><div class="example ecl-u-mh-none">ecl-u-mh-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mh-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xs">ecl-u-mh-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-s">ecl-u-mh-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-m">ecl-u-mh-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-l">ecl-u-mh-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xl">ecl-u-mh-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxl">ecl-u-mh-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin vertical</h3>
<div class="exampleContainer"><div class="example ecl-u-mv-none">ecl-u-mv-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mv-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xs">ecl-u-mv-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-s">ecl-u-mv-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-m">ecl-u-mv-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-l">ecl-u-mv-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xl">ecl-u-mv-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xxl">ecl-u-mv-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin top</h3>
<div class="exampleContainer"><div class="example ecl-u-mt-none">ecl-u-mt-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mt-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xs">ecl-u-mt-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-s">ecl-u-mt-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-m">ecl-u-mt-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-l">ecl-u-mt-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xl">ecl-u-mt-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xxl">ecl-u-mt-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin right</h3>
<div class="exampleContainer"><div class="example ecl-u-mr-none">ecl-u-mr-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mr-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xs">ecl-u-mr-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-s">ecl-u-mr-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-m">ecl-u-mr-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-l">ecl-u-mr-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xl">ecl-u-mr-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xxl">ecl-u-mr-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin bottom</h3>
<div class="exampleContainer"><div class="example ecl-u-mb-none">ecl-u-mb-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mb-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xs">ecl-u-mb-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-s">ecl-u-mb-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-m">ecl-u-mb-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-l">ecl-u-mb-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xl">ecl-u-mb-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xxl">ecl-u-mb-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin left</h3>
<div class="exampleContainer"><div class="example ecl-u-ml-none">ecl-u-ml-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-ml-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xs">ecl-u-ml-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-s">ecl-u-ml-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-m">ecl-u-ml-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-l">ecl-u-ml-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xl">ecl-u-ml-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xxl">ecl-u-ml-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin auto</h3>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-ma-auto">ecl-u-ma-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mh-auto">ecl-u-mh-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mr-auto">ecl-u-mr-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-ml-auto">ecl-u-ml-auto</div></div>

<h3 class="ecl-heading ecl-heading--h3">Responsive margin</h3>
<p class="ecl-paragraph">Add the breakpoint before margin size to display it only with corresponding screen size (works for all kind of margin ahead).</p>
<div class="exampleContainer"><div class="example ecl-u-ma-l">ecl-u-ma-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-sm-l">ecl-u-ma-sm-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-md-l">ecl-u-ma-md-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-lg-l">ecl-u-ma-lg-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ma-xl-l">ecl-u-ma-xl-l</div></div>


        
            
            /* No context defined for this component. */


        
        <style>
  .exampleContainer {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
  }

  .exampleContainerAuto {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
    width: 225px;
    height: 100px;
  }

  .example {
    background-color: #404040;
    color: #fff;
    display: inline-block;
  }

  .exampleAuto {
    background-color: #404040;
    color: #fff;
    display: block;
    width: 150px;
    height: 100%;
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">Margin all</h3>
<div class="exampleContainer">
  <div class="example ecl-u-ma-none">ecl-u-ma-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-xxs">ecl-u-ma-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-xs">ecl-u-ma-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-s">ecl-u-ma-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-m">ecl-u-ma-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-l">ecl-u-ma-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-xl">ecl-u-ma-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-xxl">ecl-u-ma-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin horizontal</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mh-none">ecl-u-mh-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mh-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xs">ecl-u-mh-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-s">ecl-u-mh-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-m">ecl-u-mh-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-l">ecl-u-mh-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xl">ecl-u-mh-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxl">ecl-u-mh-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin vertical</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mv-none">ecl-u-mv-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mv-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xs">ecl-u-mv-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-s">ecl-u-mv-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-m">ecl-u-mv-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-l">ecl-u-mv-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xl">ecl-u-mv-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xxl">ecl-u-mv-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin top</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mt-none">ecl-u-mt-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mt-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xs">ecl-u-mt-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-s">ecl-u-mt-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-m">ecl-u-mt-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-l">ecl-u-mt-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xl">ecl-u-mt-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xxl">ecl-u-mt-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin right</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mr-none">ecl-u-mr-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mr-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xs">ecl-u-mr-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-s">ecl-u-mr-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-m">ecl-u-mr-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-l">ecl-u-mr-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xl">ecl-u-mr-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xxl">ecl-u-mr-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin bottom</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mb-none">ecl-u-mb-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mb-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xs">ecl-u-mb-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-s">ecl-u-mb-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-m">ecl-u-mb-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-l">ecl-u-mb-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xl">ecl-u-mb-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xxl">ecl-u-mb-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin left</h3>
<div class="exampleContainer">
  <div class="example ecl-u-ml-none">ecl-u-ml-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-ml-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xs">ecl-u-ml-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-s">ecl-u-ml-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-m">ecl-u-ml-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-l">ecl-u-ml-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xl">ecl-u-ml-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xxl">ecl-u-ml-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin auto</h3>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-ma-auto">ecl-u-ma-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-mh-auto">ecl-u-mh-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-mr-auto">ecl-u-mr-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-ml-auto">ecl-u-ml-auto</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Responsive margin</h3>
<p class="ecl-paragraph">Add the breakpoint before margin size to display it only with corresponding screen size (works for all kind of margin ahead).</p>
<div class="exampleContainer">
  <div class="example ecl-u-ma-l">ecl-u-ma-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-sm-l">ecl-u-ma-sm-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-md-l">ecl-u-ma-md-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-lg-l">ecl-u-ma-lg-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ma-xl-l">ecl-u-ma-xl-l</div>
</div>

File:

Content:


                                /**
 * Margin utilities
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-margin/generic-utility-margin';

// Use generic mixin
@include exports('ec-utility-margin') {
  @include ecl-utility-margin();
}

URL: /components/raw/ec-utility-margin/ec-utility-margin.scss
Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-margin/ec-utility-margin.scss
Size: 247 Bytes

Handle: @ecl/ec-utility-margin
Preview:
- With layout
- Component only
Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-margin/ec-utility-margin.twig