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>