Layout
  
>
  

Margin

Easily set margin with the Margin keyword. Margin uses values from XS to XL.

Syntax

[mrg]-[xs|sm|md|lg|xl]

<div class="mrg-sm">small</div>
<div class="mrg-md">medium</div>

Available values

  • mrg-xs (4px)
  • mrg-sm (8px)
  • mrg-md (16px)
  • mrg-lg (24px)
  • mrg-xl (32px)

Samples

<div class="container"> <div class="item mrg-xs"> MRG-XS </div> </div>
Result:
MRG-XS
<div class="container"> <div class="item mrg-sm"> MRG-SM </div> </div>
Result:
MRG-SM
<div class="container"> <div class="item mrg-md"> MRG-MD </div> </div>
Result:
MRG-MD
<div class="container"> <div class="item mrg-lg"> MRG-LG </div> </div>
Result:
MRG-LG
<div class="container"> <div class="item mrg-xl"> MRG-XL </div> </div>
Result:
MRG-XL


stage: in the making