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>