Margins
See the logic of the margins. For convenience and to keep the CSS file small we have only margin bottom defined and a few others. Please apply same logic on all margins and paddings that you create.
How to get into
m-0 = 0px
m-1 = 0.25rem = 4px
m-2 = 0.5rem = 8px
Each 4 is REM
m-4 = 1rem = 16px
m-8 = 2rem = 32px
m-12 = 3rem = 48px
...
Calculate m
m-9 = m-8+m-1 = 2.25rem = 36px
m-10 = m8+m-2 = 2.5rem = 40px
...
Different axis
m - all
mx - left and right
my - top and bottom
mt - top
mr - right
mb - bottom
ml - left
More info: https://tailwindcss.com/docs/margin
How to get into
m-0 = 0px
m-1 = 0.25rem = 4px
m-2 = 0.5rem = 8px
Each 4 is REM
m-4 = 1rem = 16px
m-8 = 2rem = 32px
m-12 = 3rem = 48px
...
Calculate m
m-9 = m-8+m-1 = 2.25rem = 36px
m-10 = m8+m-2 = 2.5rem = 40px
...
Different axis
m - all
mx - left and right
my - top and bottom
mt - top
mr - right
mb - bottom
ml - left
More info: https://tailwindcss.com/docs/margin
Margin Global
Class
Element
ks-m-1
ks-m-2
ks-m-2.5
ks-m-4
ks-m-8
TO Fix with Variables
Margin right
Class
Element
ks-mr-1
ks-mr-2
ks-mr-2.5
ks-mr-4
ks-mr-8
Add variable
Margin bottom
No variables added to this sizes since there are standartized. We don't expect to be moving the size of margin botton element.
Class
Properties
Element
ks-mb-0
margin-bottom: 0px;
ks-mb-1
margin-bottom: 0.25rem; /* 4px */
ks-mb-2
margin-bottom: 0.5rem; /* 8px */
ks-mb-2.5
margin-bottom: 0.625rem; /* 10px */
ks-mb-3
margin-bottom: 0.75rem; /* 12px */
ks-mb-3.5
margin-bottom: 0.875rem; /* 14px */
ks-mb-4
margin-bottom: 1rem; /* 16px */
ks-mb-5
margin-bottom: 1.25rem; /* 20px */
ks-mb-6
margin-bottom: 1.5rem; /* 24px */
ks-mb-7
margin-bottom: 1.75rem; /* 28px */
ks-mb-8
margin-bottom: 2rem; /* 32px */
ks-mb-9
margin-bottom: 2.25rem; /* 36px */
ks-mb-10
margin-bottom: 2.5rem; /* 40px */
ks-mb-11
margin-bottom: 2.75rem; /* 44px */
ks-mb-12
margin-bottom: 3rem; /* 48px */
ks-mb-14
margin-bottom: 3.5rem; /* 56px */
ks-mb-16
margin-bottom: 4rem; /* 64px */
ks-mb-20
margin-bottom: 5rem; /* 80 */
ks-mb-24
margin-bottom: 6rem; /* 96px */
ks-mb-28
margin-bottom: 7rem; /* 112px */
ks-mb-32
margin-bottom: 8rem; /* 128px */
ks-mb-36
margin-bottom: 9rem; /* 144px */
ks-mb-40
margin-bottom: 10rem; /* 160px */