Margin | hgrid

General Margin

The margin utilities have 5 and 10 pixels incrementations from 0 to 150 pixels. They have rem units internally, but their names reflect the pixel value they correspond to with the default hgrid setup. Applying .m-60 or .margin-60 to an element gives it 6rem of margin on all sides, which corresponds to 60px.

.margin-0 / .m-0
.margin-5 / .m-5
.margin-10 / .m-10
.margin-20 / .m-20
.margin-30 / .m-20
...
.margin-150

Code example:

<div class="border-gray border-dashed max-content-max">
  <p class="m-60 bg-gray-dark text-white">
    Tell me and I forget. Teach me and I remember. Involve me and I learn.
  </p>
</div>

Result:

Tell me and I forget. Teach me and I remember. Involve me and I learn.

Individual Margin

  <div class="border-gray border-dashed max-content-max">
  <p class="bg-gray-dark mt-20 mr-90 mb-100 ml-30 text-white">
    The way to get started is to quit talking and begin doing.
  </p>
</div>

Result:

The way to get started is to quit talking and begin doing.

Class Name	CSS Property
`.mt-0` / `.margin-top-0`	margin-top: 0;
`.mt-5` / `.margin-top-5`	margin-top: 0.5rem;
`.mt-10` / `.margin-top-10`	margin-top: 1rem;
`.mt-20` / `.margin-top-20`	margin-top: 2rem;
etc. ...
`.mt-140` / `.margin-top-140`	margin-top: 14rem;
`.mt-150` / `.margin-top-150`	margin-top: 15rem;

Following the pattern above, you can add the class names .mr-{*} / .margin-right-{*}, .mb-{*} / .margin-bottom-{*} or .ml-{*} / .margin-left-{*}. Values up to 150.

Responsive Overrides

Let's revisit the example above and add a responsive modification. On tablets in landscape mode and smaller we want to remove the margin-bottom completely. We'll use the .tablet-landscape-mb-0 utility:

  <div class="border-gray border-dashed max-content-max">
  <p class="bg-gray-dark mt-20 mr-90 mb-100 ml-30 tablet-landscape-mb-0 text-white">
    The way to get started is to quit talking and begin doing.
  </div>
</div>

The result can now be seen by scaling your viewport down to 1024 pixels or less:

The way to get started is to quit talking and begin doing.

Use the override utilities along this pattern:

.desktop-large-m-5
.desktop-large-mt-5
.desktop-large-mr-5
.desktop-large-mb-5
.desktop-large-ml-5

.desktop-large-m-10
.desktop-large-mt-10
.desktop-large-mr-10
.desktop-large-mb-10
.desktop-large-ml-10

etc. ... incremented by 10

.phone-landscape-m-150
.phone-landscape-mt-150
.phone-landscape-mr-150
.phone-landscape-mb-150
.phone-landscape-ml-150

The default viewport laptop (<=1280px) is excluded from the list of viewports you can use to construct these overrides.

Here are your alternatives: .desktop-large (>1680px), .desktop (>1280px), .tablet-landscape (<1024px), .tablet-portrait (<900px), .phone-landscape (<768px) and .phone (<600px).

Automatic Margin

  <div class="border-gray border-dashed">
  <p class="width-50pct bg-gray-darker margin-0-auto pt-20 pb-20 text-center text-light">
    This element has automatic margin left and right.
  </p>
</div>

Result:

This element has automatic margin left and right.

You can use .margin-left-auto and .margin-right-auto to achieve the same effect.