Add margin and padding classes to set the required space between
elements, please note that numbers are referring to rem which is
the default font size.
- Formula: We use {p/m} {/-v-/-h-/-t-/-b-/-l-/-r-} {value}
- Orientation: -v- vertical, -h- horizontal, -t- top, -b- bottom, -l- left, -r- right
- Values: 0, 1, 2, 3, 4 are spacing values by rem, -1-16, -1-8, -1-4, -1-2, -3-4 is 1 rem divided by the value
- Notes:
- (two dashes) m-t-1 instead of mt-1, this increases readability, scalability, and the ease of maintenance.
- (v/h) m-v-1 instead of (x/y) my-1, It mirrors CSS's logical properties, ensures adaptability. It's more future-proof, internationally friendly, and semantically clearer!
Margin
-
Add the classes m0, m-1-16(1/16 rem), m-1-8, .m-1-4, .m-1-2, .m-3-4, m1(1rem), m2, m3, m4 to increase or remove margin
-
Add the classes m-v-0, m-v--1-16, m-v--1-8, .m-v--1-4, .m-v--1-2, .m-v--3-4, m-v-1, m-v-2, m-v-3, m-v-4 to increase top and bottom margin
-
Add the classes m-h-0, m-h--1-16, m-h--1-8, .m-h--1-4, .m-h--1-2, .m-h--3-4, m-h-1, m-h-2, m-h-3, m-h-4 to increase left and right margin
-
Add the classes m-t-0, m-t--1-16, m-t--1-8, .m-t--1-4, .m-t--1-2, .m-t--3-4, m-t-1, m-t-2, m-t-3, m-t-4 to increase top margin only
-
Add the classes m-b-0, m-b--1-16, m-b--1-8, .m-b--1-4, .m-b--1-2, .m-b--3-4, m-b-1, m-b-2, m-b-3, m-b-4 to increase bottom margin only
-
Add the classes m-d-1, m-d-2 to increase margin on desktop devices only
- Add the classes m-auto, m-h-auto, m-v-auto for auto margin and centreing contents
Padding
-
Add the classes p0, p-1-16(1/16 rem), p-1-8, .p-1-4, .p-1-2, .p-3-4, p1(1rem), p2, p3, p4 to
increase or remove padding
-
Add the classes p-v-0, p-v--1-16, p-v--1-8, .p-v--1-4, .p-v--1-2, .p-v--3-4, p-v-1, p-v-2, p-v-3, p-v-4 to
increase top and bottom padding
-
Add the classes p-h-0, p-h--1-16, p-h--1-8, .p-h--1-4, .p-h--1-2, .p-h--3-4, p-h-1, p-h-2, p-h-3, p-h-4 to increase left and right padding
-
Add the classes p-t-0, p-t--1-16, p-t--1-8, .p-t--1-4, .p-t--1-2, .p-t--3-4, p-t-1, p-t-2, p-t-3, p-t-4 to increase top padding only
-
Add the classes p-b-0, p-b--1-16, p-b--1-8, .p-b--1-4, .p-b--1-2, .p-b--3-4, p-b-1, p-b-2, p-b-3, p-b-4 to increase bottom padding only
-
Add the classes p-d-1, p-d-2 to increase
padding on desktop devices only
