# Guia de unidades CSS para espaçamento

> Guia completo de unidades CSS para espaçamento profissional. Domine px, em, rem, vw, vh, % e outras unidades para criar layouts precisos. Aprenda!

URL: https://dpw.dev/css/guia-unidades-css-espacamento/  
Publicado em: 2022-04-28  
Categoria: css  
Autor: Tárcio Zemel

Até pouco atrás, quando o assunto era unidades de medida CSS, pensava-se mais no `px`, mas muitas outras unidades já está disponíveis e é isso que será mostrado neste **guia de unidades CSS para espaçamento**.

Continue lendo se você quer saber quais tipos de unidade são mais apropriadas para cada situação no front end e como usar corretamente as unidades `rem`, `em`, `vh`, `vw`, `vmin`, `vmax` e `ch`.

## Espaçamento relativo ao documento `:root`

**Use**: `rem`

A menos que seja alterado, o valor padrão de `rem` é `16px` -- com a vantagem de responder a alterações no nível de zoom.

### Porque e como usar `rem`

`rem` não mudará, não importa o quão profundamente esteja aninhado, portanto, para espaçamento consistente entre/ao redor de elementos, é uma escolha confiável.

É também a medida recomendada/preferida para o dimensionamento de fontes.

[Exemplo no CodePen](https://codepen.io/anon/pen/PoqZgpw)

## Espaçamento relativo à viewport

**Use**: unidades de viewport

A **viewport** é o limite da janela do navegador ou o tamanho da tela do dispositivo.

### Unidades de viewport disponíveis

- **`vh` (viewport height).** Baseada na altura da janela de visualização;
- **`vw` (viewport width).** Baseada na largura da janela de visualização;
- **`vmin` (viewport minimum).** Retorna o menor valor de vh ou vw, atualizando responsivamente;
- **`vmax` (viewport maximum).** Retorna o maior valor de vh ou vw, atualizando responsivamente.

Unidades de viewport são ideais para:

- Manter um elemento dentro dos limites da área visível;
- Garantir que , ou um cabeçalho tenha uma altura mínima tão alta quanto a viewport (`min-height: 100vh`);
- Criar elementos proporcionais e responsivos;
- Combinar com `calc()` para afetar a visibilidade de vários elementos;
- Criar apresentações de slides de altura e largura completas (particularmente combinadas com `scroll-snap`).

Este exemplo é de um cabeçalho de altura quase total que usa `calc()` para garantir que um pouco de espaço seja deixado para sugerir conteúdo adicional:

[Exemplo no CodePen](https://codepen.io/anon/pen/RwPaRmE)

## Espaçamento relativo ao elemento

**Use**: `em`

`em` permanecerá proporcional ao elemento ou regra `font-size` do ancestral mais próximo. Um em é igual ao tamanho da fonte, então, por padrão, isso é igual a `1rem`, que é, por padrão, `16px`.

Diferente de `rem`, esta unidades CSS de espaçamento pode ser composta de pai para filho, causando resultados adversos.

Considere o seguinte exemplo de uma lista em que o tamanho da fonte é definido em `em` e composta para as respectivas listas aninhadas:

[Exemplo no CodePen](https://codepen.io/anon/pen/rNVeLdM)

### Quando e como usar `em`

- Entre elementos de tipografia;
- Para `padding` em componentes textuais (ex: botões, inputs);
- Para `letter-spacing`, normalmente como um valor bem pequeno como `0.03` (também pode ser definido negativamente).

No exemplo a seguir, altere a variável `$font-size` para ver como `label` e `button` são afetados:

[Exemplo no CodePen](https://codepen.io/anon/pen/yLNOJEY)

## Espaçamento relativo ao conteúdo

**Use**: `ch`, `em`

Embora `em` possa ser apropriado para espaçamento com base no conteúdo, uma unidades CSS para espaçamento que muitas vezes é esquecida é `ch`.

Esta unidade é igual à largura do caractere zero ("0") na família especificada em `font-family`.

### Quando e como usar `ch`

Use `ch` para definir a largura com base no comprimento de linha ideal (50-80 caracteres, dependendo do caso).

Comece com `80ch` e otimize conforme necessário com base na fonte em uso, lembrando que a maioria das fontes tem um `0` estreito, portanto, `ch` provavelmente precisará ser maior que o comprimento de linha desejado.

É ideal para:

- Conteúdo de artigos;
- Definição do valor para `flex-basis`;
- A parte "max" de `minmax()` para colunas de grid;
- Fornecer uma `min-width` em botões ou itens de navegação.

[Exemplo no CodePen](https://codepen.io/anon/pen/dyoMXQe)

## Conclusão

Há não muito tempo atrás, quando o assunto era espaçamento ou tamanhos de fontes/elementos, praticamente, só o que se vinha à mente era `px`.

Com o tempo, evoluções tecnológicas e [unidades de CSS moderno](/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/), agora uma gama muito mais ampla de possibilidades está disponível.

![Mulher sentada, com as pernas cruzadas, mexendo em seu smartphone. Estaria ela se beneficiando de um site que usou corretamente unidades CSS para espaçamento?](/images/blog/guia-unidades-css-espacamento/guia-unidades-css-espacamento-mulher-mexendo-telefone.webp)

Existem novas unidades de medida CSS, para os mais diversos casos de uso, para alcançar os mais diversos efeitos e resultados de planejamento visual que se possa imaginar.

Este g**uia de unidades CSS para espaçamento** mostrou algumas possibilidades de uso das principais unidades de medida CSS, mas, claro, eles podem ser usados para muito mais.

Mas quais são as unidades de medida CSS que _você_ mais usa nos seus projetos?

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml