Margin and Padding

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.

Margin Classes

• Add the classes m0, m03, m05, m07, m1, m2 , m4, m2px to any element to increase or remove margin
• Add the classes m-v-05, m-v-07, m-v-1, m-v-2, m-v-3, m-v-4, m-v-10 to any element to increase top and bottom margin
• Add the classes m-h-03, m-h-05, m-h-1, m-h-2, m-h-3, m-h-4, m-h-7 to any element to increase left and right margin
• Add the classes m-t-05, m-t-1, m-t-2, m-t-3, m-t-4, m-t-6, m-t-8 to any element to increase top margin only
• Add the classes m-b-05, m-b-1, m-b-2, m-b-3, m-b-4, m-b-6, m-b-8 to any element to increase bottom margin only
• Add the classes m-l-03, m-l-05, m-l-1, m-l-2, m-l-3, m-l-4, m-l-7 to any element to increase left margin
• Add the classes m-r-03, m-r-05, m-r-1, m-r-2, m-r-3, m-r-4, m-r-7 to any element to increase right margin
• Add the classes m-d-1, m-d-2 to any element to increase margin on desktop devices only
• Add the class margin-left-right-auto to center the element

Padding Classes

• Add the classes p0, p05, p07, p1, p2 , p3, p4, p5, p6, p7 to any element to increase or remove padding
• Add the classes p-v-05, p-v-1, p-v-2, p-v-3, p-v-4, p-v-10 to any element to increase top and bottom padding
• Add the classes p-h-1, p-h-2, p-h-3, p-h-4 to any element to increase left and right padding
• Add the classes p-t-05, p-t-1, p-t-2, p-t-3, p-t-4, p-t-6, p-t-8 to any element to increase top padding only
• Add the classes p-b-05, p-b-1, p-b-2, p-b-3, p-b-4, p-b-6, p-b-8 to any element to increase bottom padding only
• Add the classes p-l-03, p-l-05, p-l-1, p-l-2, p-l-3, p-l-4, p-l-7 to any element to increase left padding
• Add the classes p-r-03, p-r-05, p-r-1, p-r-2, p-r-3, p-r-4, p-r-7 to any element to increase right padding
• Add the classes p-d-1, p-d-2 to any element to increase padding on desktop devices only

← Previous Next →