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>

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>

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>

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>