Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

Margins

Margin helpers are used to space out elements.


Denali currently offers margin helpers from 0-200 pixels in each category listed in the table. You can find examples of usage below.

Class Properties
.m-auto margin: auto;
.m-{size} margin: {size};
.m-t-{size} margin-top: {size};
.m-r-{size} margin-right: {size};
.m-b-{size} margin-bottom: {size};
.m-x-{size} margin-left: {size}; margin-right: {size};
.m-y-{size} margin-left: {size}; margin-right: {size};

All Sides

Control the margin on all sides of an element using the m-{size} helper.

<div>
  <div class="box"> Box 1</div>
  <div class="box m-50"> Box 2</div>
  <div class="box"> Box 3</div>
</div>

Single Side

Control the margin on a single side of an element using the m-{t|r|b|l}-{size} helper.

<div>
  <div class="box"> Box 1</div>
  <div class="box m-t-10 m-r-20 m-b-30 m-l-40"> Box 2</div>
  <div class="box"> Box 3</div>
</div>

Horizontal

Control the margin on the left and right side of an element using the m-x-{size} helper.

<div>
  <div class="box"> Box 1</div>
  <div class="box m-x-50"> Box 2</div>
  <div class="box"> Box 3</div>
</div>

Vertical

Control the margin on the top and bottom side of an element using the m-y-{size} helper.

<div>
  <div class="box"> Box 1</div>
  <div class="box m-y-50"> Box 2</div>
  <div class="box"> Box 3</div>
</div>