Unidades de medida CSS

Hola a todos hoy os explicare las unidades de medida de CSS aplicándolos a ejemplos.

Las medidas en CSS se usan para definir la altura, anchura y márgenes de los elementos y del  tamaño de las letras.

Se indican con un valor numérico seguido de una unidad de medida.

– Unidades relativas:

Son unidades de medida que dependen de su referencia.

Las unidades relativas son:

  • em: es relativa respecto del tamaño de letra empleado. 1em es la anchura de la letra M mayúscula del tipo de letra que se está utilizando. Puede usar decimales.

ejemplo css unidades relativas em

ejemplo html unidades relativas em

  • ex: es relativa respecto de la altura de la letra x minúscula del tipo de letra que se esté utilizando. Puede usar decimales.

ejemplo css unidades relativas ex

ejemplo html unidades relativas ex

  • px: es relativa respecto de la pantalla del usuario. No puede usar decimales.

ejemplo css unidades relativas px

ejemplo html unidades relativas px

– Unidades absolutas:

Son unidades de medida que tienen unos valores determinados.

Las unidades absolutas son:

  • in: pulgadas (1 pulgada=2.54 cm)
  • cm: centimetros
  • mm: milímetros
  • pt: puntos (1 pt= 0.35 mm)
  • pc: picas (1 pica=4.23 mm)

ejemplo css unidades absolutas

ejemplo html unidades absolutas

– Porcentajes:

 Es relativa  respecto al tipo de unidad de medida usada. Si usamos una unidad relativa, también le afectara.

Por ejemplo, supongamos que asignamos a la etiqueta body un font-size de 100px y hacemos un selector de clase con otra regla con otro font-size de 50% y se lo aplicamos a un párrafo. Veremos que las letras de un párrafo serán más grandes que otro.

ejemplo css porcentajes

ejemplo html porcentajes

Espero que os sea de ayuda.

¿Te ha gustado y quieres apoyarme? ¡Sé mi patrón!
Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *