<pre class="mdl-code">{**
 *
 * The classes are named using the format .m{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
 *
 *
 * Where sides is one of:
 *
 *    t - for classes that set margin-top
 *    b - for classes that set margin-bottom
 *    l - for classes that set margin-left
 *    r - for classes that set margin-right
 *    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 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
 *    1 - (by default) for classes that set the margin to $spacer * .25
 *    2 - (by default) for classes that set the margin to $spacer * .5
 *    3 - (by default) for classes that set the margin to $spacer
 *    4 - (by default) for classes that set the margin to $spacer * 1.5
 *    5 - (by default) for classes that set the margin to $spacer * 3
 *    auto - for classes that set the margin to auto
 *
 * $spacer value could be redefine by $spacer variable in vars.scss.
 *
 *}</pre>

 <p><strong>How it works</strong></p>

 <p>Assign responsive-friendly <code>margin</code> or <code>padding</code> 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 <code>.25rem</code> to <code>3rem</code>.</p>

 <p><strong>Notation</strong></p>

 <p>Spacing utilities that apply to all breakpoints, from <code>xs</code> to <code>xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>

 <p n:syntax="off">The classes are named using the format <code>{property}{sides}-{size}</code> for <code>xs</code> and <code>{property}{sides}-{breakpoint}-{size}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.</p>

 <p>Where property is one of: <strong>m - for classes that set margin</strong></p>

 <p>Where <strong>sides</strong> is one of:</p>

 <ul>
    <li><code>t</code> - for classes that set <code>margin-top</code></li>
    <li><code>b</code> - for classes that set <code>margin-bottom</code></li>
    <li><code>l</code> - for classes that set <code>margin-left</code></li>
    <li><code>r</code> - for classes that set <code>margin-right</code></li>
    <li><code>x</code> - for classes that set both <code>*-left</code> and <code>*-right</code></li>
    <li><code>y</code> - for classes that set both <code>*-top</code> and <code>*-bottom</code></li>
    <li>blank - for classes that set a <code>margin</code> or <code>padding</code> on all 4 sides of the element</li>
</ul>

<p>Where <strong>size</strong> is one of:</p>

<ul>
    <li><code>0</code> - for classes that eliminate the <code>margin</code> by setting it to <code>0</code></li>
    <li><code>1</code> - (by default) for classes that set the <code>margin</code> to <code>$spacer * .25</code></li>
    <li><code>2</code> - (by default) for classes that set the <code>margin</code> to <code>$spacer * .5</code></li>
    <li><code>3</code> - (by default) for classes that set the <code>margin</code> to <code>$spacer</code></li>
    <li><code>4</code> - (by default) for classes that set the <code>margin</code> to <code>$spacer * 1.5</code></li>
    <li><code>5</code> - (by default) for classes that set the <code>margin</code> to <code>$spacer * 3</code></li>
    <li><code>auto</code> - for classes that set the <code>margin</code> to auto</li>
</ul>

<p>(You can add more sizes by adding entries to the <code>$spacers</code> Sass map variable.)</p>

<p><strong>Example</strong></p>

<p>Here are some representative examples of these classes:</p>

<pre class="mdl-code">
.mt-0 {
    margin-top: 0 !important;
}
    
.ml-1 {
    margin-left: ($spacer * .25) !important;
}
    
.px-2 {
    margin-left: ($spacer * .5) !important;
    margin-right: ($spacer * .5) !important;
}
    
.p-3 {
    margin: $spacer !important;
}
</pre>

<p><strong>Horizontal centering</strong></p>

<p>Additionally, Bootstrap also includes an <code>.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code>display: block</code> and a <code>width</code> set—by setting the horizontal margins to <code>auto</code>.</p>

<div class="mdl-example">
     <div class="container">
        <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15); text-align: center">
            Centered element
        </div>
    </div>
<pre>
&lt;div class="mx-auto" style="width: 200px;">
    Centered element
&lt;/div>
</pre>
</div>

<div class="bg-green mt-1">mt-1</div>
<div class="bg-orange my-1">my-1</div>
<div class="bg-red mb-1">mb-1</div>

<hr>

<div class="bg-green d-inline-block ml-1">ml-1</div>
<div class="bg-orange d-inline-block mx-1">mx-1</div>
<div class="bg-red d-inline-block mr-1">mr-1</div>

// stylelint-disable declaration-no-important

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} { margin: -$length !important; }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}