← Voltar

Escala de Espaçamento

O que m-3 e py-5 realmente valem em pixels — e a diferença entre empurrar por fora e por dentro.

O conceito

O Bootstrap não deixa você escolher qualquer valor de espaçamento. Ele oferece seis degraus, de 0 a 5, calculados a partir de uma medida base chamada $spacer (1rem = 16px). Isso é de propósito: com uma escala fechada, a página inteira fica ritmada.

mt-3

m

A propriedade: m = margin (espaço por fora), p = padding (por dentro).

t

O lado. Sem letra = todos os lados.

3

O degrau da escala, de 0 a 5. Não é pixel!

As letras de lado

ttop — só em cima
bbottom — só embaixo
sstart — só à esquerda (em português)
eend — só à direita
xesquerda e direita
yem cima e embaixo

Uma observação que vale nota: s e e substituíram l e r no Bootstrap 5 porque existem idiomas que se escrevem da direita para a esquerda. Em português, ms-3 empurra pela esquerda.

Propriedade

Lado


Classe resultante

m-3

1rem = 16px

A borda tracejada é o elemento-pai. O bloco roxo é o seu elemento; o bloco claro dentro dele é o conteúdo.

conteúdo

A escala inteira

Degrau Cálculo rem pixels