em y rem son unidades relativas basadas en fuentes y es diferente usar ems para fuentes o para longitud, por lo que tanto ems como rems se basan en fuentes, pero la diferencia entre ellos es que ems usa el elemento principal o actual como referencia mientras que rems use el tamaño de fuente raíz como referencia.
Si queremos usar ems para tamaños de fuente, entonces la referencia es simplemente el tamaño de fuente calculado por los padres de manera similar a lo que sucede con los porcentajes.
En el siguiente ejemplo, un tamaño de fuente de tres em en el elemento secundario del encabezado da como resultado 72 píxeles simplemente porque es tres veces el tamaño de fuente principal, que es (150/100) * 16 = 24px. Ahora para la longitud, es un poco diferente. El relleno 2em en el encabezado, dado que es una medida de longitud, usa el tamaño de fuente del elemento actual como referencia y ya sabemos que son 24 píxeles, por lo que 2em dará como resultado un relleno de 48 píxeles, ¿entendido? Es una diferencia sutil, pero importante. Cuando usa em si es para fuentes, la referencia es el padre y para la longitud, la referencia es el elemento actual.
html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}
Acerca del rem, en realidad funciona de la misma manera tanto para tamaños de fuente como para longitudes porque siempre usa el tamaño de fuente raíz como referencia. Esto significa que el relleno de 10 rem que tenemos aquí resultará en 160 píxeles porque el tamaño de fuente raíz es 16.