rem y em en css
Son unidades de longitud relativa.
¿Pero relativo a que?
En el caso de em quiere decir que es relativo o toma el tamaño de letra de su elemento padre. Mientras que rem toma el tamaño de letra del elemento raíz (root).
Nota:
Es importante saber que el font-size es una propiedad que se hereda del elemento padre.
Ahora nótese que el elemento raíz del documento html tiene la propiedad font-size en 16px esto es un estándar en todos los navegadores.
A partir de lo dicho anteriormente comprendamos que:
– Cualquier elemento o párrafo que «no tenga un tamaño diferente al establecido por el navegador» tendrá el mismo tamaño de letra del elemento raíz root.
– Los elementos como <h1>,<h2>, etc tienen un tamaño predeterminado diferente.
Para los siguientes ejemplos configuramos el tamaño de letra a 16px en el elemento <html> (esto es redundante; pero para mayor comprensión es mejor dejarlo así).
CSS
html {
font-size: 16px;
color: #00cfff;
background: black;
}
Podríamos hacer los ejemplos definiendo el font-size en el elemento raíz root; pero la verdad es que hice todos los ejemplos con el elemento <html>😅😅😅; bueno si usáramos root quedaría de la siguiente forma.
CSS
root {
font-size: 40px;
}
Ejemplos de em
Ejemplo #1
Tenemos un elemento <h1> que tiene de forma predeterminada un font-size de 2em, bueno a este elemento lo redefinimos con 3em, de esta forma cuando comentamos el font-size veremos que regresa al tamaño predeterminado dado.
Veamos la siguiente regla para entender la equivalencia de valores:
1em = 16px entonces 2em = 16px + 16px = 32px 3em = 16px + 16px + 16px = 48px
HTML
<html>
<body>
<h1>
Título h1
</h1>
</body>
</html>
CSS
h1 {
font-size: 3em;
color: #ff2571;
}
Hagamos énfasis en que la etiqueta <h1> toma el tamaño de letra del <html> porque en este caso el <html> es su elemento padre directamente. Si esta etiqueta <h1> estuviera dentro de un <div> con un font-size diferente otro sería el resultado.
Ejemplo #2
En este ejemplo creamos un <div> con una clase llamada div-padre y dentro de este elemento creamos otro <div> con la clase div-hijo-em.
HTML
<html>
<body>
<div class="div-padre">
Contenedor o elemento padre de "div-hijo-em".
<div class="div-hijo-em">
Elemento hijo del "div-padre".
</div>
</div>
</body>
</html>
CSS
.div-padre {
font-size: 14px;
color: #ff7235;
}
.div-hijo-em {
font-size: 1em;
color: #ff8f5f;
}
Ahora podemos ver que el elemento hijo div-hijo-em tiene un font-size de 1em, si quitamos el font-size vemos que el tamaño se mantiene porque el elemento hereda el tamaño del elemento padre que en este caso tiene un font-size de 14px.
Entonces para este caso en especifico hemos definimos el elemento padre con font-size de 14px lo cual indica que:
1em = 14px entonces 2em = 14px + 14px = 28px
Podemos comprobar estos valores cambiando el valor de «div-hijo-em» de 1em a 2em o más.
También podemos ir cambiando el valor del div-padre mientras que comentamos el font-size del «div-hijo-em» para ver como hereda el valor del elemento padre.
Ejemplos de rem
Ejemplo #1
Creamos un nuevo <div> y dentro de este creamos un <h2> con la clase div-rem le damos un font-size de 1rem y vemos que toma el maño del elemento <html>. Entonces podemos confirmar que, si «un elemento cualquiera tiene un font-size con valor 1rem toma el tamaño de letra heredada directamente desde el elemento raíz root» o en este caso desde el elemento <html> .
HTML
<html>
<body>
<div>
<h2 class="div-rem">
Elemento h2 que obtiene el tamaño de letra del <html>.
</h2>
</div>
</body>
</html>
CSS
.div-rem {
font-size: 1rem;
color: #00ff76;
}
Ejemplo #2
Último y más sencillo ejemplo, aquí simplemente colocamos un texto dentro del <html> y listo.
HTML
<html>
<body>
Texto dentro del elmento <html>.
</body>
</html>
Esta claro que este toma por defecto el mismo tamaño del <html> y no solo eso también esta heredando el color de texto.
Vídeo del archivo con todos los ejemplos
Aquí les dejo el enlace de este archivo con los 3 ejemplos.
Conclusión:
Podemos concluir afirmado que realmente rem hereda el font-size del elemento raíz root; mientras que em hereda el font-size del elemento raíz si y solo si este no se encuentra dentro de un contenedor o elemento padre definido con otro valor.
