Margins
mt = margin-top | mb = margin-bottom
ml = margin-left | mr = margin-right
mx = eixo x ( left e right)
my = eixo y ( top e bottom )
mx-1 my-1 mt-1 mb-1 ml-1 mr-1 = 8px
mx-2 my-2 mt-2 mb-2 ml-2 mr-2 = 16px
mx-10 my-10 mt-10 mb-10 ml-10 mr-10 = 80px
Paddings
pt = padding-top | pb = padding-bottom
pl = padding-left | pr = padding-right
px = eixo x ( left e right)
py = eixo y ( top e bottom )
px-1 py-1 pt-1 pb-1 pl-1 pr-1 = 8px
px-2 py-2 pt-2 pb-2 pl-2 pr-2 = 16px
px-10 py-10 pt-10 pb-10 pl-10 pr-10 = 80px
Os números são múltiplos de 8, ou seja, mx-1 = 8px, mx-5 = 40px. Caso precise adicionar espaçamentos maiores, é só criar a classe, mantendo sempre os múltiplos de 8.
