Margin & Padding
Control the margin and padding properties.
Classes
| Class | Properties |
|---|---|
| .m-auto | margin: auto; |
| .my-auto | margin-top: auto; margin-bottom: auto; |
| .mx-auto | margin-left: auto; margin-right: auto; |
| .m{t|b|l|r}-auto | margin-{top|bottom|left|right}: auto; |
| .m-0 | margin: 0; |
| .my-0 | margin-top: 0; margin-bottom: 0; |
| .mx-0 | margin-left: 0; margin-right: 0; |
| .m{t|b|l|r}-0 | margin-{top|bottom|left|right}: 0; |
| .m-{1-length($spacers)} | margin: {$spacers[i]}; |
| .my-{1-length($spacers)} | margin-top: {$spacers[i]}; margin-bottom: {$spacers[i]}; |
| .mx-{1-length($spacers)} | margin-left: {$spacers[i]}; margin-right: {$spacers[i]}; |
| .m{t|b|l|r}-{1-length($spacers)} | margin-{top|bottom|left|right}: {$spacers[i]}; |
| .p-auto | padding: auto; |
| .py-auto | padding-top: auto; padding-bottom: auto; |
| .px-auto | padding-left: auto; padding-right: auto; |
| .p{t|b|l|r}-auto | padding-{top|bottom|left|right}: auto; |
| .p-0 | padding: 0; |
| .py-0 | padding-top: 0; padding-bottom: 0; |
| .px-0 | padding-left: 0; padding-right: 0; |
| .p{t|b|l|r}-0 | padding-{top|bottom|left|right}: 0; |
| .p-{1-length($spacers)} | padding: {$spacers[i]}; |
| .py-{1-length($spacers)} | padding-top: {$spacers[i]}; padding-bottom: {$spacers[i]}; |
| .px-{1-length($spacers)} | padding-left: {$spacers[i]}; padding-right: {$spacers[i]}; |
| .p{t|b|l|r}-{1-length($spacers)} | padding-{top|bottom|left|right}: {$spacers[i]}; |
Variables
| Variable | Default Value |
|---|---|
| $spacers | .25rem, .5rem, .75rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem, 5rem, 6rem, 8rem, 16rem, 32rem |
Spacers Examples
| 1: .25rem | |
| 2: .5rem | |
| 3: .75rem | |
| 4: 1rem | |
| 5: 1.25rem | |
| 6: 1.5rem | |
| 7: 2rem | |
| 8: 2.5rem | |
| 9: 3rem | |
| 10: 4rem | |
| 11: 5rem | |
| 12: 6rem | |
| 13: 8rem | |
| 14: 16rem | |
| 15: 32rem |
Margin
Padding
Here's the content
Here's the content