Unidades de Medida

Cuando trabajamos con CSS necesitaremos especificar con frecuencia anchura, altura, márgenes o tamaño de distintos elementos como cajas contenedoras de distintos tipos, imágenes, texto, etc. CSS permite la especificación de valores relacionados con el tamaño de distintas maneras para facilitar el trabajo a los programadores y diseñadores web.

Las unidades de medida CSS se dividen en dos grupos:

  • Unidades de medida relativas
  • Unidades de medida absolutas.
  • También se habla a veces de unidades híbridas.

 

Unidades de medida relativas

Son aquellas que determinan un tamaño en función de otro tamaño. Por ejemplo si indicamos que el ancho de un elemento como 50%, dicho porcentaje tiene que estar referido al 50% de algo ¿de qué? En el caso de un ancho del 50% puede estar referido normalmente al 50% del ancho que tenga el contenedor del elemento.

A continuación indicamos las unidades de medida relativas disponibles en CSS:

Unidad Símbolo Ejemplo Observaciones 
Porcentaje % #menu1 {width: 50%;} Porcentaje relativo al elemento contenedor.
Relativa al tamaño de letra em #menu1 {font-size: 2.65em;} Tantas veces el tamaño que sea de aplicación como se indique. Por ejemplo si el tamaño de letra de aplicación es 12 pixeles, 1 em son 12px, 2 em son 24 px, 3 em son 36 px, etc.
Relativo a la x minúscula ex #menu1 {font-size: 2.65ex;} Tantas veces la altura de la letra x minúscula como se especifique. Por ejemplo si la x minúscula que se debería mostrar mide 10mm, 1 ex son 10 mm, 1.5ex son 15mm, 2ex son 20mm, etc.
Pixel* px #menu1 {font-size: 24px;} Tantas veces los puntos visibles que tenga la pantalla donde se visualice la página web como se especifique.

*Puede considerarse una unidad híbrida, ni absoluta ni relativa.

Unidades de medida absolutas

Son aquellas que determinan el tamaño de algo de forma concreta, específica y medible. Por ejemplo si decimos que un tamaño de un div debe ser de 150 mm de alto, no hay duda al respecto. El div tomará exactamente ese valor (aunque puede haber pequeñas distorsiones en función del dispositivo en que se visualice) y si cogemos una regla escolar y lo medimos, el div tendrá esa medida (aproximadamente 150 mm).

A continuación indicamos las unidades de medida absolutas disponibles en CSS:

Unidad Símbolo Ejemplo Observaciones 
Pulgada in div {background-color:pink; width: 7in;} 1 pulgada son 25.4 mm
Centímetro cm div{background-color:pink; width: 20cm;}
Milímetro mm div{background-color:pink; width: 1000mm;}
Punto pt div{background-color:pink; font-size: 24pt;} 1 punto equivale a 1/72 pulgadas ó aprox. 0.35 mm
Pica pc div{background-color:pink; font-size: 2pc;} 1 pica equivale a 12 puntos o aprox. 4.23 mm
Pixel* px div{background-color:pink; font-size: 24px;} Tantas veces los puntos visibles que tenga la pantalla donde se visualice la página web como se especifique.

*Puede considerarse una unidad híbrida, ni absoluta ni relativa.

A %d blogueros les gusta esto: