CSSkel provides utility classes for margins and padding, based on a --spacer variable (default: 1em). These classes follow a consistent naming pattern and allow for precise control over spacing.
Use .m:[value], .mt:[value], .mb:[value], .ml:[value], .mr:[value], .mx:[value], and .my:[value] to set margins. Values range from 0 to 11, with increments of 0.5 for finer control (e.g., .m:0.5, .m:1, .m:1.5, etc.).
| Class | Description |
|---|---|
.m:[value] |
Sets margin on all sides |
.mt:[value] |
Sets top margin |
.mb:[value] |
Sets bottom margin |
.ml:[value] |
Sets left margin |
.mr:[value] |
Sets right margin |
.mx:[value] |
Sets left and right margins |
.my:[value] |
Sets top and bottom margins |
.m:auto |
Sets margin to auto on all sides |
.mx:auto |
Sets left and right margins to auto (centers element) |
Use .p:[value], .pt:[value], .pb:[value], .pl:[value], .pr:[value], .px:[value], and .py:[value] to set padding. Values range from 0 to 11, with increments of 0.5 for finer control.
| Class | Description |
|---|---|
.p:[value] |
Sets padding on all sides |
.pt:[value] |
Sets top padding |
.pb:[value] |
Sets bottom padding |
.pl:[value] |
Sets left padding |
.pr:[value] |
Sets right padding |
.px:[value] |
Sets left and right padding |
.py:[value] |
Sets top and bottom padding |
<div class="m:2 p:1">Element with margin and padding</div>
<div class="mx:auto p:2">Centered element with padding</div>