Margin

How to use

Margins and paddings can have both size values such as sm md lg as well as fractional values, which by default cover every 5% up until 100% plus 1/3 and 2/3 fractional values. Like with most other things with many values, both the names and values can be edited in the _variables.scss file. See the Customize section for more details.

What about Negitive Margins?

I did not include negitive margins in this framework, since in my experience I don't use 'em that heavily, however, they are useful sometimes. If you need negitive margins it could be a good time to write some custom SCSS.

Alright let's get into the classes.

Classes

Here are the default classes. Note that in addition to the m-[size] classes, there's also .mt,.mb,ml, and mr classes for top, bottom, left, and right margins respectively, as well as .mx and .my classes for both left and right or top and bottom.

All these clases also respond to the responsive prefixes, see the (Responsive)[/docs/responsive-classes/] section for details for that as well.

Note that with the fraction classes the percents aren't repeated, for example, there's a 1/20 and a 3/20 margin, but not a 2/20 margin or a 4/20 margin because those are already handled by the 1/10 and 1/5 classes.

Each of these classes are repeated for top, bottom, left, right, x, and y directions so see some examples below:

Examples

Margin Sizes

These are the example "default" sizes for margins. Note these can all be changed by editing the _variables.scss file. See the Customize section for further info. These are just a collection of examples, each blue box has a margin the size of the caption applied to it:

Here's what the html for one of the boxes above would look like

<div>
  <div class="bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed">
    <div class="bg-blue w-3 h-3 mr-xl" />
  </div>
  <p>.mr-xl</p>
</div>

Fractional Sizes

Percents are relative to the containing element, so each box here has been given a fixed size, and the margin left pushes it away from the left side by the percent that the fraction is equal to:

Here's an example for the HTML of the ml-1/2 box:

<div class="m-md">
  <div class="bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed w-16">
    <div class="bg-blue w-3 h-3 ml-1/2" />
  </div>
  <p>.ml-1/2</p>
</div>

Directional Margins

And here are examples of classes going in each direction. Each "directional" class also works for every one of the widths i.e. sm, md, lg, etc.

A few examples of the above boxes (just mt, mb, and mx):

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-background-dkr border-dark-mode-only-ltr border-lg border-dashed">
      <div class="bg-blue w-3 h-3 mt-xl" />
    </div>
  </div>
  <p>.mt-xl</p>
</div>

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-background-dkr border-dark-mode-only-ltr border-lg border-dashed">
      <div class="bg-blue w-3 h-3 mb-xl" />
    </div>
  </div>
  <p>.mb-xl</p>
</div>

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-background-dkr border-dark-mode-only-ltr border-lg border-dashed">
      <div class="bg-blue w-3 h-3 mx-xl" />
    </div>
  </div>
  <p>.mx-xl</p>
</div>

Responsive Margins

And finally, here's some examples with the responsive classes set. If you're on a browser, adjust the screen sizes to see them in action, although for small sizes you'll have to close the sidebar:

Code for the Box:

<div class="bg-background-dkr border-dark-mode-only-ltr border-lg border-dashed radius-md mb-md">
  <div class="w-5 h-5 m-sm tab:m-lg scr:m-2xl lg:m-3xl bg-blue radius-md" />
</div>

Responive margin with the max-[breakpoint] classes. Here the margin left is 1/4 for widths under 1024px and 3/4 for widths over that amount:

And here's the HTML:

<div class="center flex-col m-xl">
  <div class="bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed w-16">
    <div class="bg-blue w-3 h-3 ml-3/4 max-scr:ml-1/4" />
  </div>
</div>

Anyway hope that clears up how the margin works.

Happy coding!