Quando impostiamo la dimensione di qualsiasi elemento nei CSS, abbiamo due scelte. Il primo sono unità assolute e l'altro sono unità relative. Le unità assolute sono fisse e non relative a nient'altro. Sono sempre identici in ogni caso. Coinvolgono cm, mm, px, ecc. D'altro canto, le unità relative sono relative a qualcos'altro. Potrebbe essere la dimensione dell'elemento genitore o la dimensione dell'HTML principale. Le unità relative comprendono em, rem, vw, vh, ecc. Queste sono unità scalabili e aiutano nella progettazione reattiva. Molti di noi potrebbero confondersi tra le unità relative, in particolare il In e il rem unità. Analizziamo la differenza tra questi due. Fondamentalmente sia rem che em sono unità di dimensione scalabili e relative, ma con em l'unità è relativa alla dimensione del carattere del suo elemento genitore, mentre l'unità rem è relativa solo alla dimensione del carattere radice del documento HTML. La r in rem sta per radice.

Comprendiamoli entrambi in dettaglio.

1. negli Stati Uniti: L'unità em consente di impostare la dimensione del carattere di un elemento rispetto alla dimensione del carattere del suo genitore. Quando la dimensione dell'elemento genitore cambia, la dimensione dell'elemento figlio cambia automaticamente.

Nota: quando le unità em vengono utilizzate nella proprietà font-size, la dimensione è relativa alla dimensione font del genitore. Se utilizzato su altre proprietà, è relativo alla dimensione del carattere di quell'elemento stesso. Qui, solo la prima dichiarazione prende il riferimento del genitore.

• La dimensione del carattere dell'elemento .child sarà 40px (2*20px).
• Il margine di .child sarà 60px . È 1,5 volte la dimensione del carattere del nostro elemento (1,5*40px).

Esempio: Questo esempio mostra l'uso dell'unità em nei CSS .

HTML