Unidades de medida en CSS

Unidades de medida en CSS

Unidades de medida en CSS

Todo elemento que requiera de un espacio específico en una página web debe contar con ciertas dimensiones. Estas dimensiones son expresadas en los estilos en cascada como valor de una propiedad, por ejemplo, el ancho de un elemento div de html.

Estos valores por lo general son números, enteros o decimales, positivos o negativos y requieren que se determine una unidad de medida, de lo contrario no se lograría el efecto deseado, ya que no existe una unidad de medida por omisión.

Sin embargo, hay dos excepciones para esta regla:

1. La propiedad line-height, acepta un valor sin unidad de medida,  su resultado es la multiplicación del valor por el tamaño de letra del elemento. En este ejemplo, la altura de la línea será de 19.2 pixeles.

p {font-size: 16px; line-height: 1.2;}

2. Cuando el valor es 0 (cero).

.sinBorde {border:0;}

Tipos de unidades de medida en CSS

Existen dos tipos de unidades de medida en CSS:

  • Unidades absolutas
  • Unidades relativas

Unidades absolutas

Las unidades absolutas aplican un tamaño fijo para el elemento al que se aplica. A excepción del pixel (px), en la práctica se utilizan solamente para establecer medidas en medios impresos.

px

pantalla Apto para pantalla
impresora Apto para impresión

El término proviene de Pixel, es la unidad de medida inventada para los Estilos en cascada y también de las más utilizadas. Los elementos en una página web que deben estar a un tamaño definido, como imágenes y bordes, se establecen mediante pixeles.

Su medida es de 1/96 de pulgada: 1 pulgada = 96px.

See the Pen pixeles by Miguel Méndez (@codigo-web) on CodePen.0

cm

impresora Apto para impresión

El término proviene de Centimeter (Centímetro), aplica para medios impresos.

1 pulgada=2.54 cm.

See the Pen cm by Miguel Méndez (@codigo-web) on CodePen.0

mm

impresora Apto para impresión

El término proviene de Millimeter (Milímetro), aplica para medios impresos.

1 pulgada=25.4 mm.

See the Pen mm by Miguel Méndez (@codigo-web) on CodePen.0

in

impresora Apto para impresión

El término proviene de Inch (Pulgada), aplica para medios impresos.

1 pulgada=2.54 cm.

See the Pen in by Miguel Méndez (@codigo-web) on CodePen.0

pt

impresora Apto para impresión

El término proviene de Point (Punto), aplica para medios impresos.

1 pulgada=72 pt.

See the Pen pt by Miguel Méndez (@codigo-web) on CodePen.0

pc

impresora Apto para impresión

El término proviene de Pica, aplica para medios impresos.

1 pulgada=6 pc.

See the Pen pc by Miguel Méndez (@codigo-web) on CodePen.0

Hay dos opciones para indicar los estilos de impresión de un documento html:

La primera de ellas es generando un archivo .css exclusivo para este fin, se llama con la instrucción link, utilizando el atributo media con el valor print (dentro de la cabeza del documento html):

See the Pen mediaPrint_html by Miguel Méndez (@codigo-web) on CodePen.0

La segunda opción es incorporando los estilos para impresión dentro de la hoja de estilos general, empleando un media de tipo print:

See the Pen mediaPrint by Miguel Méndez (@codigo-web) on CodePen.0

Unidades relativas

Las unidades relativas son ampliamente empleadas en la actualidad, ya que logran adaptar los elementos a los que se aplican a pantallas con diversas dimensiones.

%

pantalla Apto para pantalla

El símbolo representa “Percentage” (Porcentaje), la unidad representa el 1/100 de la dimensión disponible en el espacio donde se desea insertar el elemento.

See the Pen porcentaje by Miguel Méndez (@codigo-web) on CodePen.0

em

pantalla Apto para pantalla

Originalmente el término viene de la letra “M” y significaba que un elemento medía el ancho de la letra “m“. Con el tiempo y para efectos de CSS, ha cambiado este significado, refiriéndose ahora a la altura de la tipografía. Esta unidad es escalable, se utiliza generalmente para establecer tamaños de letra, márgenes y rellenos (paddings).

Su medida se establece de forma dinámica según la medida asignada al texto del propio elemento o un elemento padre, en caso que no haya sido asignado, su medida se tomaría del valor por omisión del texto en una página web (16px).

Por ejemplo, si se le asigna a body un tamaño de letra de 16px, y a h1 un tamaño de letra de 1.5 em, el tamaño en pixeles del texto en h1 será de 24px.

See the Pen em by Miguel Méndez (@codigo-web) on CodePen.0

rem

pantalla Apto para pantalla

El término proviene de “Root Em“, la unidad representa al tamaño establecido en la raíz del documento (el elemento html), o en su defecto, el valor por omisión del texto: 16px (mientras que el usuario no lo haya cambiado en las preferencias del Navegador).

Si el usuario cambió el valor del tamaño del texto en las preferencias de el Navegador, por omisión 1 rem será igual al valor establecido en las preferencias de este.

See the Pen rem by Miguel Méndez (@codigo-web) on CodePen.0

ex

pantalla Apto para pantalla

El término proviene de la letra “x“, representa la altura de la letra minúscula “x” (o las minúsculas en general que no contienen ascendentes o descendentes).

See the Pen ex by Miguel Méndez (@codigo-web) on CodePen.0

ch

pantalla Apto para pantalla

El término proviene de Character unit, representa el ancho de del carácter “0” (cero).

En el ejemplo se emplea una fuente monospace, donde cualquier caracter mide el mismo tamaño.

See the Pen ch by Miguel Méndez (@codigo-web) on CodePen.0

vw

pantalla Apto para pantalla

El término proviene de “Viewport width” (Ancho de la ventana), la unidad representa 1/100 parte de la dimensión del ancho de la ventana.

vh

pantalla Apto para pantalla

El término proviene de “Viewport height” (Alto de la ventana), la unidad representa 1/100 parte de la dimensión de la altura de la ventana.

See the Pen vw_vh by Miguel Méndez (@codigo-web) on CodePen.0

vmin

pantalla Apto para pantalla

El término proviene de “Viewport minimum” (Mínimo de la ventana), la unidad representa 1/100 parte de la dimensión mínima de la ventana (puede ser la medida horizontal o vertical).

See the Pen vmin by Miguel Méndez (@codigo-web) on CodePen.0

vmax

pantalla Apto para pantalla

El término proviene de “Viewport maximum” (Máximo de la ventana), la unidad representa 1/100 parte de la dimensión máxima de la ventana (puede ser la medida horizontal o vertical).

See the Pen vmax by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Con estas 15 unidades de medida en CSS contamos con un abanico de posibilidades para elegir la mejor opción al momento de asignar dimensiones a los elementos que componen una página web.

Algunas de estas unidades son más útiles que otras, por ejemplo, la unidad de porcentaje (%), así como em son muy utilizadas en la actualidad, mientras que con las unidades vmax,  vmin cuesta un poco de trabajo imaginarles un uso práctico.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz