En CSS existen dos tipos de medidas relativas: em y rem. El primero es un tanto por uno que toma como referencia el tamaño del elemento padre. En el segundo caso, tenemos otro tanto por uno. Ahora bien, este no toma de referencia al elemento padre, sino, por lo que he leído, al elemento raíz.
Investigando, he leído también que por "elemento raíz" se refieren al estilo original o estándar de las etiquetas HTML para el elemento en concreto sobre el cual estemos trabajando.
Pero no me cuadra y os pongo un ejemplo para ilustrar el origen de mi duda:
#div{
width: 20rem;
height: 20rem;
background: red;
margin-top: 100px;
}
Un div
, por defecto, debería tener medidas 0x0. Ahora bien, está muy claro que, si aplicáis este estilo a un div
, el tamaño es otro.
Así pues: ¿de dónde salen las medidas de referencia para la unidad rem?
font-size