Valores de las unidades de longitud en CSS
Por Aitor López de Aberasturi el Sábado, 30 de Agosto de 2014 0 Comentarios
Hay 2 clases de unidades de longitud unidades absolutas y unidades relativas.
Unidades Absolutas
Las unidades absolutas son útiles si se conoce cual es el tamaño del medio de salida.
- in: pulgadas (1 pulgada = 2.54 cm)
- cm: centímetros
- mm: milímetros.
- pt: puntos (1 punto = 1/72 pulgada)
- pc: picas (1 pica = 12 puntos)
Unidades relativas
Las unidades relativas especifican una longitud relativa a otra propiedad con lo que se ajustan mejor a salidas diferentes.
- em: Relativo a la altura del tamaño de la fuente
- ex: Relativo a la altura de la letra x (x-height).
- rem: Relativo al tamaño de la fuente del elemento raíz.
- px: El número de píxeles.
- %: Un porcentaje de un valor de otra propiedad.
No hay que dejar espacios entre la medida y la longitud. <p width="font-size:10 px;"> es incorrecto. Normalmente se suele trabajar con píxeles cuando trabajamos con anchos con tamaño fijo o con porcentajes cuando queremos ajustar horizontalmente las páginas web.
Ejemplos:
<p style="background-color:red;width:4in"> 4in </p> <p style="background-color:red;width:10cm"> 10cm </p> <p style="background-color:red;width:100mm"> 100mm </p> <p style="background-color:red;width:100pt"> 100pt </p> <p style="background-color:red;width:10pc"> 10pc </p> <p style="background-color:red;width:100px"> 100px </p> <p style="background-color:red;width:30%"> 30% </p> <p style="background-color:red;width:30ex"> 30ex </p> <p style="background-color:red;width:30rem"> 30rem </p> <p style="background-color:red;width:20em"> 20em </p>