We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
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}; |
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>