Al configurar el tamaño de cualquier elemento en CSS, tenemos dos opciones. El primero son unidades absolutas y el otro son unidades relativas. Las unidades absolutas son fijas y no relativas a nada más. En cualquier caso, siempre son idénticos. Implican cm, mm, px, etc. Por otro lado, las unidades relativas son relativas a otra cosa. Puede ser el tamaño del elemento principal o el tamaño del HTML principal. Las unidades relativas cubren em, rem, vw, vh, etc. Estas son unidades escalables y ayudan en el diseño responsivo. Muchos de nosotros podríamos confundirnos entre las unidades relativas, especialmente las en y el movimiento rápido del ojo unidades. Analicemos la diferencia entre esos dos. Básicamente, tanto rem como em son unidades de tamaño escalables y relativas, pero con em, la unidad es relativa al tamaño de fuente de su elemento principal, mientras que la unidad rem solo es relativa al tamaño de fuente raíz del documento HTML. La r en rem significa raíz.

Entendamos ambos en detalle.

1. me Unido: La unidad em permite configurar el tamaño de fuente de un elemento en relación con el tamaño de fuente de su padre. Cuando el tamaño del elemento principal cambia, el tamaño del elemento secundario cambia automáticamente.

Nota: Cuando se utilizan unidades em en la propiedad de tamaño de fuente, el tamaño es relativo al tamaño de fuente del padre. Cuando se usa en otras propiedades, es relativo al tamaño de fuente de ese elemento. Aquí, sólo la primera declaración toma la referencia del padre.

• El tamaño de fuente del elemento .child será 40px (2*20 píxeles).
• El margen de .child será 60px . Eso es 1,5 veces el tamaño de fuente de nuestro elemento (1,5*40px).

Ejemplo: Este ejemplo muestra el uso de la unidad em en CSS.

HTML

bash si declaración