Porcentagem % | CSS

Porcentagem % | CSS

Regra de ouro

Tamanho horizontal (width, left/right, padding/margin inline) → % é da largura do containing block (normalmente o pai).
Tamanho vertical (height, top/bottom, padding/margin block) → % é da altura do containing block… mas só funciona se essa altura for definida (não “auto”). Se a altura do pai for “auto”, o % geralmente vira auto/não tem efeito.

Containing block = a “caixa de referência” (quase sempre o elemento pai; para position:absolute/fixed, é o ancestral posicionável).

Tabela rápida por propriedade

width: 100% → 100% da largura do pai. Dica: com box-sizing: border-box, os 100% incluem padding e borda do próprio elemento.
height: 100% → 100% da altura do pai, se o pai tiver altura definida. Ex. para “tela cheia” com cadeia de 100%:
```
html, body, #app { height: 100%; }
.main { height: 100%; }
```
Alternativa mais simples: min-height: 100vh; (viewport).
padding/margin em %
- Inline (esquerda/direita em LTR) → % da largura do pai.
- Block (topo/base) → historicamente também % da largura do pai (sim, mesmo sendo vertical). Em termos lógicos: % é calculado a partir do tamanho inline do containing block (largura no modo horizontal).
top/right/bottom/left com % (elementos posicionados) – % é do tamanho do containing block no eixo correspondente (top/bottom usam altura; left/right usam largura). Para position:absolute/fixed, a referência é a padding box do containing block.

transform: translate(%) – % é do próprio elemento (sua border box), não do pai. É por isso que o truque de centrar funciona:

.box {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* 50% do próprio tamanho */
}

background-size: 50% 100% – % é do background positioning area (geralmente a padding box do elemento). background-position: 50% 50% centraliza (percentuais levam em conta área e imagem).
border-radius: 50% – % relativo ao próprio elemento: raios horizontais % da largura, verticais % da altura. (50% vira círculo/oval conforme o box).
font-size: 120% – % do font-size do elemento pai (valor computado herdado).
line-height: 120% – % do font-size do próprio elemento.
flex-basis: 30% – % do tamanho interno do contêiner flex no eixo principal. Em flex-direction: row, é da largura do contêiner; em column, da altura (se for definida).
Grid (grid-template-columns: 25% 75%) – % é do tamanho do grid container no eixo (largura para colunas, altura para linhas).
min-/max-width/height: 50% – % do tamanho do containing block naquele eixo; para min/max-height, precisa de altura definida para resolver.

Pegadinhas comuns

height: 100% “não funciona” Porque o pai está com height: auto. Dê uma altura ao pai (em % com cadeia até html, body, ou use vh).
Padding/margin vertical em % parecem “estranhos” Isso é esperado: eles usam a largura do pai (truque clássico pra “aspect-ratio” antes de aspect-ratio existir).
translate(%) ≠ left/top: % left/top medem o pai; translate(%) mede o próprio elemento.

Exemplos rápidos

/* 1) Largura cheia do pai */
.child { width: 100%; }

/* 2) Seção de altura total da tela */
.section { min-height: 100vh; }

/* 3) Card com padding fluido baseado na largura do pai */
.card { padding: clamp(1rem, 5%, 2rem); }

/* 4) Grid 30/70 */
.grid { display: grid; grid-template-columns: 30% 70%; }

/* 5) Input com altura 100% do contêiner (que tem altura definida) */
.wrapper { height: 3rem; }
.input   { height: 100%; box-sizing: border-box; }