Практики використання em у CSS

Практичне застосування одиниці em у вкладених елементах та переведення значень з px в em.

Одиниця em у вкладених елементах

Одиниця em дозволяє задавати розміри відносно розміру шрифту батьківського елемента. Якщо елементи вкладені один в один, значення em можуть послідовно змінюватися.

<html><head><title></title></head><body><main><div><p>text</p></div></main></body></html>

За замовчуванням браузер задає елементу html розмір шрифту 16px. Тому цей розмір можна використовувати як початковий для розрахунків у em.

html { font-size: 16px; }

Наприклад, якщо для main задати font-size: 1.5em, його розмір шрифту буде 24px, оскільки 16px × 1.5 = 24px.

main { font-size: 1.5em; }

Якщо для вкладеного div задати font-size: 2em, розмір буде розрахований від розміру шрифту main: 24px × 2 = 48px.

div { font-size: 2em; }

Переведення px у em

Щоб перевести значення font-size з px у em, потрібно поділити потрібний розмір на розмір шрифту батьківського елемента.

font-size: потрібний_розмір / font-size_батьківського_елемента;

Наприклад, якщо батьківський елемент має шрифт 16px, то 32px дорівнює 2em, оскільки 32 / 16 = 2.

Практичне завдання

Для всіх завдань використовуйте такий HTML-код:

<main><h1>header</h1><div><p>text</p><p>text</p></div><div><p>text</p><p>text</p></div></main>

Практичне завдання 1

📌 Завдання:

Перепишіть у em усі значення, задані в px.
Вважайте, що стандартний font-size елемента html дорівнює 16px.

main { margin: 16px auto; } h1 { font-size: 32px; } p { font-size: 32px; }

💡 Показати підказку

Для main батьківським елементом є html з font-size 16px. Для h1 і p батьківським елементом є main, якщо для main не задано інший font-size, тому він успадковує 16px.

✅ Показати відповідь

main { margin: 1em auto; } h1 { font-size: 2em; } p { font-size: 2em; }

Практичне завдання 2

📌 Завдання:

Перепишіть у em усі значення, задані в px.
Врахуйте, що font-size div впливає на розрахунок font-size його дочірніх p.

main { margin: 32px auto; } h1 { font-size: 32px; } div { font-size: 16px; margin-bottom: 32px; } p { font-size: 20px; }

💡 Показати підказку

Для main і h1 базовий розмір становить 16px. Для div font-size: 16px — це 1em від main. Для p батьківський div має 16px, тому 20px потрібно поділити на 16px.

✅ Показати відповідь

main { margin: 2em auto; } h1 { font-size: 2em; } div { font-size: 1em; margin-bottom: 2em; } p { font-size: 1.25em; }

❗ Важливо:

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