CSS: Unidades de Medida

Unidades de Medidas Absolutas

Essas são as unidades que não dependem de um valor de referência. Vejamos as cinco unidades absolutas:

• in – polegada
• cm – centímetro
• mm – milímetro
• pt – ponto (1pt = 1/72inch)
• pc – pica (1pc = 12pt)

As
unidades mostradas acima só deverão ser utilizadas quando se sabe os
detalhes das características físicas e das configurações da mídia onde
o documento será utilizado. No caso de navegadores (browsers), fica
inviável utilizar esse tipos de medidas, pois a resolução será definida
conforme a resolução de tela e tamanho do monitor do usuário.

Das
cinco medidas apresentadas acima, a utilizada com maior frequência é a
pt (ponto), pois é a medida utilizada em mídia impressa, herdada da tipografia.

Unidades de Medidas Relativas

São as unidades que se baseiam em um valor de referência definido anteriormente. Vejamos as três unidades relativas:

• Unidade em

calculada com base em um tamanho de fonte definido no documento.

Exemplo: Em um cabeçalho <h1>…</h1> com font-size igual a 50px e margin-left igual a 1em, margin-left será igual a 50px. 

Calculando o tamanho de em: 0.5em x 20px = 10px (esse é o valor em pixels da medida 0.5em)

Obs.: Se
não for definido um tamanho de fonte para um elemento, o tamanho que
será tomado como base para o cálculo de em será o do ancestral mais
próximo. Se não tiver sido definido um tamanho de fonte para um
ancestral, o tamanho que será tomado como base será o 16px, que é o
padrão.

• Unidade ex

Essa unidade é igual à altura da letra “x” minúscula da fonte utilizada.

Grande
parte dos navegadores não renderiza de forma correta essa unidade por
causa das dificuldades que possuem em definir a altura de uma fonte.
Sendo assim eles utilizam uma notação onde 1ex é igual a 0.5em.

Obs.: O uso dessa medida no desenvolvimento de sites não é comum.

• Unidade px

A
unidade de medida mais utilizada na criação de sites. Ela é calculada
com base na resolução do dispositivo onde o documento é visualizado. O
uso dessa unidade de medida proporciona ao desenvolvedor um maior
controle sobre um layout, onde a precisão absoluta é necessária.

• Porcentagens

Essa
unidade tem seu cálculo feito com base em valor preexistente. O valor
de referência é determinado pelo valor de uma das propriedades do
elemento em questão ou até mesmo do valor de um elemento ancestral ou
ainda de uma valor de contexto geral de formatação.

A forma como é escrita essa medida varia ente valores de 0 a 100 acompanhados do sinal de porcentagem (%).

Dica: Quando uma medida for igual a 0 (zero), não existe a necessidade de especificar a unidade, use apenas 0.

Até o próximo artigo.