Espaçamento - Margins e Paddings

classe propriedade
margin
m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left margin-right
my margin-top margin-bottom
padding
m padding
mt padding-top
mr padding-right
mb padding-bottom
ml padding-left
mx padding-left padding-right
my padding-top padding-bottom

Valores disponíveis:

0, 5, 10, 15, 20, 25, 30, 35, 40, 50, 75, 100

Valores negativos para margin:

-5, -10, -15
Não existe valores negativos para mx e my.

As medidas são definidos com rem. Os números das classes são o equivalente em pixels para uma melhor compreensão.

Os valores de 5 a 15 são fixo em toda viewport. Valores superiores são definidos com vw até o breakpoint de 1024px.

Adicione esses valores após a letra da classe. O "-" hífen só é necessário para valores de margin negativos.

O valor para classes de margin sem número a frente é auto.

Todas as declarações usam !important

Ainda não entendeu? então veja essa tabela:
classe propriedade valor
    < 1024px > = 1024px calculo em pixels
viewport 1024px
space = padding ou margin
Remove espaçamento
pt0 - mt0 space-top: 0 0 0
pr0 - mr0 space-right: 0 0 0
pb0 - mb0 space-bottom: 0 0 0
pl0 - ml0 space-left: 0 0 0
px0 - mx0 space-left:   space-right: 0 0 0
py0 - my0 space-top:   space-bottom: 0 0 0
p0 - m0 space: 0 0 0 0 0 0 0 0
Espaçamento superior
pt5 - mt5 space-top: 0.313rem0.313rem= 5px
pt10 - mt10 space-top: 0.625rem0.625rem= 10px
pt15 - mt15 space-top: 0.9375rem0.9375rem= 15px
pt20 - mt20 space-top: 1.96vw1.25rem= 20px
pt25 - mt25 space-top: 2.45vw1.563rem= 25px
pt30 - mt30 space-top: 2.9525vw1.875rem= 30px
pt35 - mt35 space-top: 3.4225vw2.188rem= 35px
pt40 - mt40 space-top: 3.911vw2.5rem= 40px
pt50 - mt50 space-top: 4.889vw3.125rem= 50px
pt75 - mt75 space-top: 7.3325vw4.688rem= 75px
pt100 - mt100 space-top: 9.7752vw6.25rem= 100px
Espaçamento direito
pt5 - mt5 space-right: 0.313rem0.313rem= 5px
pt10 - mt10 space-right: 0.625rem0.625rem= 10px
pt15 - mt15 space-right: 0.9375rem0.9375rem= 15px
pt20 - mt20 space-right: 1.96vw1.25rem= 20px
pt25 - mt25 space-right: 2.45vw1.563rem= 25px
pt30 - mt30 space-right: 2.9525vw1.875rem= 30px
pt35 - mt35 space-right: 3.4225vw2.188rem= 35px
pt40 - mt40 space-right: 3.911vw2.5rem= 40px
pt50 - mt50 space-right: 4.889vw3.125rem= 50px
pt75 - mt75 space-right: 7.3325vw4.688rem= 75px
pt100 - mt100 space-right: 9.7752vw6.25rem= 100px
Espaçamento inferior
pt5 - mt5 space-bottom: 0.313rem0.313rem= 5px
pt10 - mt10 space-bottom: 0.625rem0.625rem= 10px
pt15 - mt15 space-bottom: 0.9375rem0.9375rem= 15px
pt20 - mt20 space-bottom: 1.96vw1.25rem= 20px
pt25 - mt25 space-bottom: 2.45vw1.563rem= 25px
pt30 - mt30 space-bottom: 2.9525vw1.875rem= 30px
pt35 - mt35 space-bottom: 3.4225vw2.188rem= 35px
pt40 - mt40 space-bottom: 3.911vw2.5rem= 40px
pt50 - mt50 space-bottom: 4.889vw3.125rem= 50px
pt75 - mt75 space-bottom: 7.3325vw4.688rem= 75px
pt100 - mt100 space-bottom: 9.7752vw6.25rem= 100px
Espaçamento esquerdo
pt5 - mt5 space-left: 0.313rem0.313rem= 5px
pt10 - mt10 space-left: 0.625rem0.625rem= 10px
pt15 - mt15 space-left: 0.9375rem0.9375rem= 15px
pt20 - mt20 space-left: 1.96vw1.25rem= 20px
pt25 - mt25 space-left: 2.45vw1.563rem= 25px
pt30 - mt30 space-left: 2.9525vw1.875rem= 30px
pt35 - mt35 space-left: 3.4225vw2.188rem= 35px
pt40 - mt40 space-left: 3.911vw2.5rem= 40px
pt50 - mt50 space-left: 4.889vw3.125rem= 50px
pt75 - mt75 space-left: 7.3325vw4.688rem= 75px
pt100 - mt100 space-left: 9.7752vw6.25rem= 100px
Espaçamento direito e esquerdo
pt5 - mt5 space-right:   space-left: 0.313rem  0.313rem0.313rem  0.313rem= 5px 5px
pt10 - mt10 space-right:   space-left: 0.625rem  0.625rem0.625rem  0.625rem= 10px 10px
pt15 - mt15 space-right:   space-left: 0.9375rem  0.9375rem0.9375rem  0.9375rem= 15px 15px
pt20 - mt20 space-right:   space-left: 1.96vw  1.96vw1.25rem  1.25rem= 20px 20px
pt25 - mt25 space-right:   space-left: 2.45vw  2.45vw1.563rem  1.563rem= 25px 25px
pt30 - mt30 space-right:   space-left: 2.9525vw  2.9525vw1.875rem  1.875rem= 30px 30px
pt35 - mt35 space-right:   space-left: 3.4225vw  3.4225vw2.188rem  2.188rem= 35px 35px
pt40 - mt40 space-right:   space-left: 3.911vw  3.911vw2.5rem  2.5rem= 40px 40px
pt50 - mt50 space-right:   space-left: 4.889vw  4.889vw3.125rem  3.125rem= 50px 50px
pt75 - mt75 space-right:   space-left: 7.3325vw  7.3325vw4.688rem  4.688rem= 75px 75px
pt100 - mt100 space-right:   space-left: 9.7752vw  9.7752vw6.25rem  6.25rem= 100px 100px
Espaçamento superior e inferior
pt5 - mt5 space-top:   space-bottom: 0.313rem  0.313rem0.313rem  0.313rem= 5px 5px
pt10 - mt10 space-top:   space-bottom: 0.625rem  0.625rem0.625rem  0.625rem= 10px 10px
pt15 - mt15 space-top:   space-bottom: 0.9375rem  0.9375rem0.9375rem  0.9375rem= 15px 15px
pt20 - mt20 space-top:   space-bottom: 1.96vw  1.96vw1.25rem  1.25rem= 20px 20px
pt25 - mt25 space-top:   space-bottom: 2.45vw  2.45vw1.563rem  1.563rem= 25px 25px
pt30 - mt30 space-top:   space-bottom: 2.9525vw  2.9525vw1.875rem  1.875rem= 30px 30px
pt35 - mt35 space-top:   space-bottom: 3.4225vw  3.4225vw2.188rem  2.188rem= 35px 35px
pt40 - mt40 space-top:   space-bottom: 3.911vw  3.911vw2.5rem  2.5rem= 40px 40px
pt50 - mt50 space-top:   space-bottom: 4.889vw  4.889vw3.125rem  3.125rem= 50px 50px
pt75 - mt75 space-top:   space-bottom: 7.3325vw  7.3325vw4.688rem  4.688rem= 75px 75px
pt100 - mt100 space-top:   space-bottom: 9.7752vw  9.7752vw6.25rem  6.25rem= 100px 100px
Espaçamento nos quatro lados
pt5 - mt5 space: 0.313rem  0.313rem0.313rem  0.313rem= 5px 5px
pt10 - mt10 space: 0.625rem  0.625rem0.625rem  0.625rem= 10px 10px
pt15 - mt15 space: 0.9375rem  0.9375rem0.9375rem  0.9375rem= 15px 15px
pt20 - mt20 space: 1.96vw  1.96vw1.25rem  1.25rem= 20px 20px
pt25 - mt25 space: 2.45vw  2.45vw1.563rem  1.563rem= 25px 25px
pt30 - mt30 space: 2.9525vw  2.9525vw1.875rem  1.875rem= 30px 30px
pt35 - mt35 space: 3.4225vw  3.4225vw2.188rem  2.188rem= 35px 35px
pt40 - mt40 space: 3.911vw  3.911vw2.5rem  2.5rem= 40px 40px
pt50 - mt50 space: 4.889vw  4.889vw3.125rem  3.125rem= 50px 50px
pt75 - mt75 space: 7.3325vw  7.3325vw4.688rem  4.688rem= 75px 75px
pt100 - mt100 space: 9.7752vw  9.7752vw6.25rem  6.25rem= 100px 100px
Margin auto
classes propriedades valor
mr margin-right: auto
ml margin-left: auto
mx margin-right:   margin-left: auto
my margin-top:   margin-bottom: auto
m margin: auto auto
Margin com valores negativos
classes propriedades valor
Margin superior
mt-5 margin-top: -0.313rem= -5px
mt-10 margin-top: -0.625rem= -10px
mt-15 margin-top: -0.9375rem= -15px
Margin da direita
mr-5 margin-right: -0.313rem= -5px
mr-10 margin-right: -0.625rem= -10px
mr-15 margin-right: -0.9375rem= -15px
Margin inferior
mb-5 margin-bottom: -0.313rem= -5px
mb-10 margin-bottom: -0.625rem= -10px
mb-15 margin-bottom: -0.9375rem= -15px
Margin da esquerda
ml-5 margin-left: -0.313rem= -5px
ml-10 margin-left: -0.625rem= -10px
ml-15 margin-left: -0.9375rem= -15px