Spacing
To increase or decrease the space you need to modify the --m-s variable in :root (default value 1 rem)
| Property | Shortcuts | ||||||
|---|---|---|---|---|---|---|---|
margin |
.m-0 |
.m-1 |
.m-2 |
.m-3 |
.m-4 |
.m-5 |
.m-6 |
margin-top |
.mt-0 |
.mt-1 |
.mt-2 |
.mt-3 |
.mt-4 |
.mt-5 |
.mt-6 |
margin-bottom |
.mb-0 |
.mb-1 |
.mb-2 |
.mb-3 |
.mb-4 |
.mb-5 |
.mb-6 |
margin-left |
.ms-0 |
.ms-1 |
.ms-2 |
.ms-3 |
.ms-4 |
.ms-5 |
.ms-6 |
margin-right |
.me-0 |
.me-1 |
.me-2 |
.me-3 |
.me-4 |
.me-5 |
.me-6 |
margin left & right |
.mh-0 |
.mh-1 |
.mh-2 |
.mh-3 |
.mh-4 |
.mh-5 |
.mh-6 |
margin top & bottom |
.mv-0 |
.mv-1 |
.mv-2 |
.mv-3 |
.mv-4 |
.mv-5 |
.mv-6 |
Dynamic spacing
Apply dynamic margin to all first-level children of the parent
| Property | Shortcuts | |||||
|---|---|---|---|---|---|---|
margin |
.m-1-auto |
.m-2-auto |
.m-3-auto |
.m-4-auto |
.m-5-auto |
.m-6-auto |
margin-top |
.mt-1-auto |
.mt-2-auto |
.mt-3-auto |
.mt-4-auto |
.mt-5-auto |
.mt-6-auto |
margin-bottom |
.mb-1-auto |
.mb-2-auto |
.mb-3-auto |
.mb-4-auto |
.mb-5-auto |
.mb-6-auto |
margin-left |
.ms-1-auto |
.ms-2-auto |
.ms-3-auto |
.ms-4-auto |
.ms-5-auto |
.ms-6-auto |
margin-right |
.me-1-auto |
.me-2-auto |
.me-3-auto |
.me-4-auto |
.me-5-auto |
.me-6-auto |
Auto spacing
Apply auto margin on each element
| Property | Shortcuts |
|---|---|
margin auto |
.m-auto |
margin-left auto |
.ms-auto |
margin-right auto |
.me-auto |
horizontal margin 1/4 |
.mh-1-4 0.25 rem |
horizontal margin 1/2 |
.mh-1-2 0.50 rem |
horizontal margin 3/4 |
.mh-3-4 0.75 rem |
vertical margin 1/4 |
.mv-1-4 0.25 rem |
vertical margin 1/2 |
.mv-1-2 0.50 rem |
vertical margin 3/4 |
.mv-3-4 0.75 rem |