CSS – Unidade Relativa EM

Marcelo Abib Cardoso — Fri, 29 May 2009 17:07:14 +0000

Primeiramente esse post é dedicado ao César Ribeiro e ao Augusto Gomes que me pediram isso, mas que poderá ajudar outras pessoas.

Mas antes de explicarmos o em e como ele trabalha, vamos entender unidade relativa, o que é isso?
Unidade relativa é aquela definida em relação a uma outra medida, usa-se unidade relativa pois ela acaba se ajustando a todos os tipos de midias, mas ela acaba exigindo mais habilidade na hora de montar o css. Ex: Mobile, que de celular para celular muda tamanho de tela.

No nosso caso aqui hoje será o em, que é definido em relação ao tamanho da fonte herdada. Não se sabe ao certo a sua denominação, mas presume-se que seja um acronimo de Equivalent Measure.

Recapitulando: a medida EM será definida em relação ao tamanho da fonte herdada, ótimo, mas como faz?.

Exemplo:
Vamos definir o html com font 16px assim:

No html:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Exemplo de EM

Usando a font definida para a tag html que foi de 16px

Agora vamos colocar uma div e dentro dessa div, um texto qualquer com tamaho 10px que transformando para EM no nosso caso vai ser 0.625em

Usando a font definida para a tag div.herdando que foi de 10px ou 0.625em – Verdana

mas Marcelo para tudo, como chega no 0.625em ou saber quanto 0.625em equivale em px?
Vamos la, a conta é simples.

Obs: 1em – 10px

Html – 16px – 1.6em
Nosso Texto – 10px
em “EM” equievale á: 10/16 = 0.625

Ou seja peguei o valor da font acima da div que criamos, que no nosso caso é a tag html e fiz a divisão pelo valor que eu queria que a div tivesse, que no nosso caso foi 10px.

Beleza e se abaixo dessa div, tiver um P e nesse P eu colocar outra fonte, com tamanho 8px, qual sera o em?
Estrutura:
Html(16px – 1.6em)
Div(10px – 0.625em)
P(8px – ?em)
Mesma conta feita anteriormente mas agora pegaremos o valor do P que é 8px e dividiremos pelo valor da tag pai que neste caso é a div que tem valor 10px.
8/10 = 0.8em

E se eu tiver uma medida em EM e quero saber quanto ela equivale em PX, conta inversa, só que ao inves de dividir vamos multiplicar, assim:
0.8(Da Tag P)*10px da tag pai = 8px é a tag P que equivale a 0.8em

Da DIV é a mesma coisa, vamos super que tinhamos o valor 0.625em e queriamos saber quanto equivale em PX.
0.625(Da tag Div) * 16px(Da tag pai que é o Html no nosso caso) = 10px

e se não tivessemos o 16px, tivessemos somente o 1.6em.
Partiriamos desde o começo em que 1em equivale a 10px, portanto 1.6em * 10 = 16px
E depois iamos achando os PX das tags debaixo.

É isso pessoal, abaixo tem o site de uma calculadora online para te dar as medidas em EM
http://riddle.pl/emcalc/

e nosso exemplo completo:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Exemplo de EM

Usando a font definida para a tag html que foi de 16px

Usando a font definida para a tag div.herdando que foi de 10px ou 0.625em – Verdana

Outros sites com referencias sobre o EM:
http://maujor.com/tutorial/medidascss.php
http://www.emprimeiro.com.br/tutoriais/tutorial-medidas-css.html

Obrigado,
Marcelo

Marcelo Abib Cardoso » CSS

CSS – Unidade Relativa EM