En este post hablare de las unidades de medidas con CSS, con estas podremos cambiarle el tamaño a los títulos, párrafos, enlaces, etc. Existen dos tipos de medidas las relativas y absoluta. Las medidas absolutas estas nos permiten establecer un valor fijo y que no se modifique para nada; esta no se utiliza mucho definiremos las relativas que son las más usadas.
Unidades de medidas con CSS: relativas
Estas medidas son flexibles y se adaptan más fáciles a nuestros trabajos, las medidas son la que nosotros conocemos como px, em, rem, estas son medidas flexibles.
La unidad em representa el valor de su elemento padre esto quiere decir que la unidad de medida que este arriba de la em sera la que valdrá por 1 em.
Ejemplo:
Aquí él toma el valor la medida del body entonces, 1em aquí es 20px, si la medida del body cambia entonces 1em obtendrá el valor que tenga el body; esta unidad es muy flexible puedes ponerla en decimales si así lo necesitas.
Si en algún caso tenemos más de una medida, entonces el em pasa a tener el valor que tenga arriba de él.
Ejemplo:
Aquí podemos observar como hay un div en medio del Body y el párrafo (p) el em ya no toma al body como su valor inicial, él toma al div porque es el que está arriba entonces em ya no vale 16px si no 20px.
Unidades de medida con CSS: Absolutas
Les mostrare algunas unidades de medidas absolutas; actualmente no se utilizan pero las colocare por si las quieres o las necesitas.
Centímetro: Cm
h1 { line-height: 8cm; }
Milímetros: mm
p { word-spacing: 4mm; }
Pulgadas: in
body { margin: 0.5in; }
También existen los porcentaje % pero estos se utilizan más para las cajas; en un siguiente post hablare de las unidades de color, etiquetas, propiedades y demás funciones interesantes en CSS.