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 |
||
Remove espaçamento | ||||
pt0 - mt0 | 0 | 0 | 0 | |
pr0 - mr0 | 0 | 0 | 0 | |
pb0 - mb0 | 0 | 0 | 0 | |
pl0 - ml0 | 0 | 0 | 0 | |
px0 - mx0 | 0 | 0 | 0 | |
py0 - my0 | 0 | 0 | 0 | |
p0 - m0 | 0 0 | 0 0 | 0 0 | |
Espaçamento superior | ||||
pt5 - mt5 | 0.313rem | 0.313rem | = 5px | |
pt10 - mt10 | 0.625rem | 0.625rem | = 10px | |
pt15 - mt15 | 0.9375rem | 0.9375rem | = 15px | |
pt20 - mt20 | 1.96vw | 1.25rem | = 20px | |
pt25 - mt25 | 2.45vw | 1.563rem | = 25px | |
pt30 - mt30 | 2.9525vw | 1.875rem | = 30px | |
pt35 - mt35 | 3.4225vw | 2.188rem | = 35px | |
pt40 - mt40 | 3.911vw | 2.5rem | = 40px | |
pt50 - mt50 | 4.889vw | 3.125rem | = 50px | |
pt75 - mt75 | 7.3325vw | 4.688rem | = 75px | |
pt100 - mt100 | 9.7752vw | 6.25rem | = 100px | |
Espaçamento direito | ||||
pt5 - mt5 | 0.313rem | 0.313rem | = 5px | |
pt10 - mt10 | 0.625rem | 0.625rem | = 10px | |
pt15 - mt15 | 0.9375rem | 0.9375rem | = 15px | |
pt20 - mt20 | 1.96vw | 1.25rem | = 20px | |
pt25 - mt25 | 2.45vw | 1.563rem | = 25px | |
pt30 - mt30 | 2.9525vw | 1.875rem | = 30px | |
pt35 - mt35 | 3.4225vw | 2.188rem | = 35px | |
pt40 - mt40 | 3.911vw | 2.5rem | = 40px | |
pt50 - mt50 | 4.889vw | 3.125rem | = 50px | |
pt75 - mt75 | 7.3325vw | 4.688rem | = 75px | |
pt100 - mt100 | 9.7752vw | 6.25rem | = 100px | |
Espaçamento inferior | ||||
pt5 - mt5 | 0.313rem | 0.313rem | = 5px | |
pt10 - mt10 | 0.625rem | 0.625rem | = 10px | |
pt15 - mt15 | 0.9375rem | 0.9375rem | = 15px | |
pt20 - mt20 | 1.96vw | 1.25rem | = 20px | |
pt25 - mt25 | 2.45vw | 1.563rem | = 25px | |
pt30 - mt30 | 2.9525vw | 1.875rem | = 30px | |
pt35 - mt35 | 3.4225vw | 2.188rem | = 35px | |
pt40 - mt40 | 3.911vw | 2.5rem | = 40px | |
pt50 - mt50 | 4.889vw | 3.125rem | = 50px | |
pt75 - mt75 | 7.3325vw | 4.688rem | = 75px | |
pt100 - mt100 | 9.7752vw | 6.25rem | = 100px | |
Espaçamento esquerdo | ||||
pt5 - mt5 | 0.313rem | 0.313rem | = 5px | |
pt10 - mt10 | 0.625rem | 0.625rem | = 10px | |
pt15 - mt15 | 0.9375rem | 0.9375rem | = 15px | |
pt20 - mt20 | 1.96vw | 1.25rem | = 20px | |
pt25 - mt25 | 2.45vw | 1.563rem | = 25px | |
pt30 - mt30 | 2.9525vw | 1.875rem | = 30px | |
pt35 - mt35 | 3.4225vw | 2.188rem | = 35px | |
pt40 - mt40 | 3.911vw | 2.5rem | = 40px | |
pt50 - mt50 | 4.889vw | 3.125rem | = 50px | |
pt75 - mt75 | 7.3325vw | 4.688rem | = 75px | |
pt100 - mt100 | 9.7752vw | 6.25rem | = 100px | |
Espaçamento direito e esquerdo | ||||
pt5 - mt5 | 0.313rem 0.313rem | 0.313rem 0.313rem | = 5px 5px | |
pt10 - mt10 | 0.625rem 0.625rem | 0.625rem 0.625rem | = 10px 10px | |
pt15 - mt15 | 0.9375rem 0.9375rem | 0.9375rem 0.9375rem | = 15px 15px | |
pt20 - mt20 | 1.96vw 1.96vw | 1.25rem 1.25rem | = 20px 20px | |
pt25 - mt25 | 2.45vw 2.45vw | 1.563rem 1.563rem | = 25px 25px | |
pt30 - mt30 | 2.9525vw 2.9525vw | 1.875rem 1.875rem | = 30px 30px | |
pt35 - mt35 | 3.4225vw 3.4225vw | 2.188rem 2.188rem | = 35px 35px | |
pt40 - mt40 | 3.911vw 3.911vw | 2.5rem 2.5rem | = 40px 40px | |
pt50 - mt50 | 4.889vw 4.889vw | 3.125rem 3.125rem | = 50px 50px | |
pt75 - mt75 | 7.3325vw 7.3325vw | 4.688rem 4.688rem | = 75px 75px | |
pt100 - mt100 | 9.7752vw 9.7752vw | 6.25rem 6.25rem | = 100px 100px | |
Espaçamento superior e inferior | ||||
pt5 - mt5 | 0.313rem 0.313rem | 0.313rem 0.313rem | = 5px 5px | |
pt10 - mt10 | 0.625rem 0.625rem | 0.625rem 0.625rem | = 10px 10px | |
pt15 - mt15 | 0.9375rem 0.9375rem | 0.9375rem 0.9375rem | = 15px 15px | |
pt20 - mt20 | 1.96vw 1.96vw | 1.25rem 1.25rem | = 20px 20px | |
pt25 - mt25 | 2.45vw 2.45vw | 1.563rem 1.563rem | = 25px 25px | |
pt30 - mt30 | 2.9525vw 2.9525vw | 1.875rem 1.875rem | = 30px 30px | |
pt35 - mt35 | 3.4225vw 3.4225vw | 2.188rem 2.188rem | = 35px 35px | |
pt40 - mt40 | 3.911vw 3.911vw | 2.5rem 2.5rem | = 40px 40px | |
pt50 - mt50 | 4.889vw 4.889vw | 3.125rem 3.125rem | = 50px 50px | |
pt75 - mt75 | 7.3325vw 7.3325vw | 4.688rem 4.688rem | = 75px 75px | |
pt100 - mt100 | 9.7752vw 9.7752vw | 6.25rem 6.25rem | = 100px 100px | |
Espaçamento nos quatro lados | ||||
pt5 - mt5 | 0.313rem 0.313rem | 0.313rem 0.313rem | = 5px 5px | |
pt10 - mt10 | 0.625rem 0.625rem | 0.625rem 0.625rem | = 10px 10px | |
pt15 - mt15 | 0.9375rem 0.9375rem | 0.9375rem 0.9375rem | = 15px 15px | |
pt20 - mt20 | 1.96vw 1.96vw | 1.25rem 1.25rem | = 20px 20px | |
pt25 - mt25 | 2.45vw 2.45vw | 1.563rem 1.563rem | = 25px 25px | |
pt30 - mt30 | 2.9525vw 2.9525vw | 1.875rem 1.875rem | = 30px 30px | |
pt35 - mt35 | 3.4225vw 3.4225vw | 2.188rem 2.188rem | = 35px 35px | |
pt40 - mt40 | 3.911vw 3.911vw | 2.5rem 2.5rem | = 40px 40px | |
pt50 - mt50 | 4.889vw 4.889vw | 3.125rem 3.125rem | = 50px 50px | |
pt75 - mt75 | 7.3325vw 7.3325vw | 4.688rem 4.688rem | = 75px 75px | |
pt100 - mt100 | 9.7752vw 9.7752vw | 6.25rem 6.25rem | = 100px 100px |
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 |
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 |