| wrapper | |
| .wrapper-1x | padding: 1px |
| .wrapper-2x | padding: 2px |
| .wrapper-xxs | padding: 3px |
| .wrapper-xs | padding: 5px |
| .wrapper-sm | padding: 10px |
| .wrapper | padding: 15px |
| .wrapper-md | padding: 20px |
| .wrapper-lg | padding: 25px |
| .wrapper-xl | padding: 30px |
| .wrapper-xxl | padding: 50px |
| padding-left | |
| .p-l-1x | padding-left: 1px |
| .p-l-2x | padding-left: 2px |
| .p-l-xxs | padding-left: 3px |
| .p-l-xs | padding-left: 5px |
| .p-l-sm | padding-left: 10px |
| .p-l | padding-left: 15px |
| .p-l-md | padding-left: 20px |
| .p-l-lg | padding-left: 25px |
| .p-l-xl | padding-left: 30px |
| .p-l-xxl | padding-left: 50px |
.p-r (padding-right) , .p-t (padding-top) , .p-b (padding-bottom) have the same classes as the .p-l
You can also use -
.p-v (padding-top and padding-bottom) , .p-h (padding-left and padding-right)
|
|
| margin | |
| .m-1x | margin: 1px |
| .m-2x | margin: 2px |
| .m-xxs | margin: 3px |
| .m-xs | margin: 5px |
| .m-sm | margin: 10px |
| .m | margin: 15px |
| .m-md | margin: 20px |
| .m-lg | margin: 25px |
| .m-xl | margin: 30px |
| .m-xxl | margin: 50px |
| margin-left | |
| .m-l-1x | margin-left: 1px |
| .m-l-2x | margin-left: 2px |
| .m-l-xxs | margin-left: 3px |
| .m-l-xs | margin-left: 5px |
| .m-l-sm | margin-left: 10px |
| .m-l | margin-left: 15px |
| .m-l-md | margin-left: 20px |
| .m-l-lg | margin-left: 25px |
| .m-l-xl | margin-left: 30px |
| .m-l-xxl | margin-left: 50px |
You also use
.m-r (margin-right) , .m-t (margin-top) , .m-b (margin-bottom) have the same classes as the .m-l
You can also use -
.m-v (margin-top and margin-bottom) , .m-h (margin-left and margin-right)
|
|
| margin (negetive) | |
| .m-n-1x | margin: -1px |
| .m-n-2x | margin: -2px |
| .m-n-xxs | margin: -3px |
| .m-n-xs | margin: -5px |
| .m-n-sm | margin: -10px |
| .m-n | margin: -15px |
| .m-n-md | margin: -20px |
| .m-n-lg | margin: -25px |
| .m-n-xl | margin: -30px |
| .m-n-xxl | margin: -50px |
| margin-left (negetive) | |
| .m-l-n-1x | margin-left: -1px |
| .m-l-n-2x | margin-left: -2px |
| .m-l-n-xxs | margin-left: -3px |
| .m-l-n-xs | margin-left: -5px |
| .m-l-n-sm | margin-left: -10px |
| .m-l-n | margin-left: -15px |
| .m-l-n-md | margin-left: -20px |
| .m-l-n-lg | margin-left: -25px |
| .m-l-n-xl | margin-left: -30px |
| .m-l-n-xxl | margin-left: -50px |
You also use
.m-r-n (margin-right negetive) , .m-t-n (margin-top negetive) , .m-b-n (margin-bottom negetive) have the same classes as the .m-l-n
You can also use vertical and horizontal
.m-v-n (margin-top and margin-bottom) negative , .m-h-n (margin-left and margin-right) negative
|
|
