Guia de unidades CSS para espaçamento

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.

See the Pen CSS Sizing with rem by Stephanie Eckles (@5t3ph) on CodePen.

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:

See the Pen viewport units and calc for header height by Stephanie Eckles (@5t3ph) on CodePen.

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:

See the Pen ModernCSS.dev demo of compounding em sizing by Stephanie Eckles (@5t3ph) on CodePen.

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:

See the Pen em spacing for relatively proportionate components by Stephanie Eckles (@5t3ph) on CodePen.

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.

See the Pen ch for use in element spacing by Stephanie Eckles (@5t3ph) on CodePen.

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, agora uma gama muito mais ampla de possibilidades está disponível.

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 guia 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?