El tamaño de los elementos en CSS

Las unidades de longitud que se pueden utilizar en CSS nos permiten definir el tamaño de los elementos y de los textos.

Hay dos grandes grupos. Las unidades absolutas y las unidades relativas.

Las unidades absolutas sólo dependen del medio de salida (por ejemplo, una impresora) así que no son demasiado útiles:

Unidades absolutas
in	pulgadas (1 pulgada = 2.54 centímetros)
cm	centímetros
mm	milímetros
pt	puntos (1 punto = 1/72 pulgada)
pc	picas (1 pica = 12 puntos)

Las unidades más utilizadas son las llamadas relativas. Se dicen relativas a algo, es decir, se miden respecto a otra cosa:

Unidades relativas
px	pixeles
em	relativa a la altura de la fuente (font)
ex	relativa a la altura de la letra "x"
%	porcentajes

Las posibilidades son varias aunque, por lo general, usamos tres: pixeles (px), relativas (em) o porcentajes (%).

¿Es mejor una que otra? Las opiniones varían así que no hay que hacer caso a los consejos y usar las que nos resulten más cómodas. En principio yo prefiero usar pixeles porque permite controlar cada elemento con facilidad, siempre se adaptarán a la resolución de la pantalla del usuario.

Las otras unidades relativas dependen de la altura de un elemento previamente definido, son un porcentaje de ese elemento principal por ejemplo, la fuente de texto por defecto. En principio, esa fuente tiene este valor:

font-size:1em;

un valor mayor, significa un tamaño superior:

font-size:1.5em;

un valor menor, significa un tamaño inferior:

font-size:0.5em;

Si bien no es sencillo de controlar, usar em permite crear páginas proporcionadas que no se deformarán sin importar donde las veamos.

De alguna manera, son similares a los porcentajes pero no se suelen usar para las fuentes de los textos sino en el resto de los elementos, generalemente, con las propidades width y height.

En la web hay muchas tablas de equivalencias entre las diferentes unidades, esta es sólo una más:

Puntos	Pixeles	Em	%
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%