Foundation

Espaçamento & Métricas

Utilitários de margin, padding e gap. Dois sistemas de tamanho: escala semântica PP→XXG e escala numérica N4px.

Sintaxe das Classes

Propriedade
m p gap
m = margin
p = padding
gap = gap
 
+
Direção
t b l r x y
t = top   b = bottom
l = left  r = right
x = left+right  y = top+bottom
(omitir = todos os lados)
 
-
Tamanho
pp p m g gg xg xxg
escala semântica
- ou -
1 2 3 4 6 8 12 16
escala numérica (N 4px)

Escala de Tamanhos

1rem = 10px. A escala semântica vai de PP (4px) a XXG (120px). A escala numérica usa múltiplos de 4px.

Semântica (PP ? XXG)

pp 0.4rem 4px
p 0.8rem 8px
m 1.6rem 16px
g 2.4rem 24px
gg 4.8rem 48px
xg 8.0rem 80px
xxg 12.0rem 120px

Numérica (N 4px)

1 0.4rem 4px
2 0.8rem 8px
3 1.2rem 12px
4 1.6rem 16px
6 2.4rem 24px
8 3.2rem 32px
12 4.8rem 48px
16 6.4rem 64px

Margin

CSS: margin[-side]: value

Espaço externo ao elemento - empurra os vizinhos. Não afeta o tamanho interno do elemento.

MARGIN (.m-g)
ELEMENTO

Área hachurada = espaço da margin

Classe Propriedade CSS Variantes de tamanho
.m-* margin
0pppmgggxgxxgau
.mt-* margin-top
0pp→xxgau1 2 3 4 5 6 8 10 12
.mb-* margin-bottom
0pp→xxgau1 2 3 4 5 6 8 10 12
.ml-* margin-left
0pp→xxgau1 2 3 4 6 8
.mr-* margin-right
0pp→xxgau1 2 3 4 6 8
.mx-* margin-left + margin-right
0pp→ggau
.my-* margin-top + margin-bottom
0pp→gg

Padding

CSS: padding[-side]: value

Espaço interno ao elemento - entre o conteúdo e a borda. Aumenta o tamanho total do elemento.

PADDING (.p-g)
CONTEÚDO

Área colorida = espaço do padding

Classe Propriedade CSS Variantes de tamanho
.p-* padding
0pppmgggxgxxg1 2 3 4 5 6 8 10 12
.pt-* padding-top
0pp→xxg1 2 3 4 6 8 10
.pb-* padding-bottom
0pp→xxg1 2 3 4 6 8 10
.pl-* padding-left
0pp→gg
.pr-* padding-right
0pp→gg
.px-* padding-left + padding-right
0pp→gg2 4 6 8
.py-* padding-top + padding-bottom
0pp→gg2 4 6 8

Gap

CSS: gap | column-gap | row-gap

Espaço entre itens de um container flex ou grid. Use .gap-x-* para coluna e .gap-y-* para linha separadamente.

.gap-pp - 4px

.gap-p - 8px

.gap-m - 16px

.gap-g - 24px

.gap-gg - 48px

Classe Propriedade CSS Variantes
.gap-* gap
0pp p m g gg xg xxg1 2 3 4 5 6 7 8 10 12 16
.gap-x-* column-gap
0pp p m g gg
.gap-y-* row-gap
0pp p m g gg

Margin vs Padding - Quando usar cada um

Situação Use Exemplo
Separar seções/blocos entre si .mb-* / .mt-* <section class="mb-gg">
Centralizar elemento na página .mx-au <div class="mx-au" style="max-width:80rem">
Espaço interno de cards/botes .p-* / .px-* .py-* <button class="px-g py-p">
Área clicável maior em links .p-* <a class="p-m">
Espaço entre itens de lista/flex/grid .gap-* <ul class="flx gap-m">
Empurrar elemento para o final (flex) .mt-au / .ml-au <button class="ml-au">