Tema 14Unidades en CSS

Para cambiar las propiedades margin y padding, nuestros valores tienen que utilizar una unidad de medición válida. En estos ejemplos hemos estado usando píxeles (px), pero existen otras, estas se dividen en dos tipos:

  • Unidades Absolutas

    • Píxeles
      Se define con px. Un píxel es la unidad más pequeña de medición de una pantalla o imagen digital.

    • Centímetros (no recomendado)
      Se define con cm.

    • Milímetros (no recomendado)
      Se define con mm.

    • Pulgadas (no recomendado)
      Se define con in.

    Para este tipo de unidades, sólo se recomienda utilizar px, ya que dependiendo del dispositivo, pueden variar los tamaños especificados con las otras unidades.

  • Unidades Relativas

    • em
      Esta unidad es relativa al tamaño de fuente del elemento. Es decir, si tenemos un tamaño de fuente de 14px, entonces 2em = 28px.

    • rem
      Similar a em, rem es relativa al tamaño de fuente del elemento raíz, o sea el elemento <html>.

    • Porcentajes
      Definidos con el símbolo %, hacen referencia al elemento padre, es decir, al contenedor del elemento. Si usamos un margen de 50%, entonces será de la mitad del tamaño del contenedor.

    • vh
      Es una unidad relativa a la altura del viewport (el espacio en donde está el contenido), donde una unidad 1vh equivale a 1% de la altura de nuestra ventana.

    • vw
      Es una unidad relativa al ancho del viewport, donde una unidad 1vw equivale a 1% del ancho de nuestra ventana.

Copia los ejemplos de arriba y cambia sus unidades, observa cómo varían los tamaños de los elementos. Cuando utilices vh o vw, observa cómo cambian los tamaños si agrandas o achicas la ventana del navegador.

Módulo 3

Tu Progreso

63%

Progreso General del Curso