Встановлюючи розмір будь-якого елемента в CSS, у нас є два варіанти. Перший – це абсолютні одиниці, а інший – відносні. Абсолютні одиниці є фіксованими і не відносяться ні до чого іншого. У будь-якому випадку вони завжди ідентичні. Вони включають см, мм, пікселі тощо. З іншого боку, відносні одиниці є відносно чогось іншого. Це може бути розмір батьківського елемента або розмір основного HTML. Відносні одиниці охоплюють em, rem, vw, vh тощо. Це масштабовані одиниці, які допомагають створювати адаптивний дизайн. Багато хто з нас може плутати відносні одиниці, особливо в і рем одиниць. Давайте розберемо різницю між цими двома. По суті, і rem, і em є масштабованими та відносними одиницями розміру, але для em одиниця виміру відносно розміру шрифту його батьківського елемента, тоді як одиниця rem є лише відносно розміру кореневого шрифту документа HTML. r in rem означає корінь.

Розберемося з ними обома докладніше.

1. в Юнайтед: Модуль em дозволяє встановити розмір шрифту елемента відносно розміру шрифту його батьківського елемента. Коли розмір батьківського елемента змінюється, розмір дочірнього елемента змінюється автоматично.

Примітка. Коли одиниці em використовуються у властивості font-size, розмір відповідає розміру шрифту батьківського елемента. Коли він використовується в інших властивостях, він залежить від розміру шрифту самого елемента. Тут лише перша декларація бере посилання на батьків.

• Розмір шрифту елемента .child буде 40 пікселів (2*20 пікселів).
• Маржа .child буде 60 пікселів . Це в 1,5 рази більше розміру шрифту нашого елемента (1,5*40 пікселів).

приклад: У цьому прикладі показано використання одиниці em у CSS.

HTML