Наслідування та одиниці em у CSS

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

Наслідування та em

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

<main><div><p>text</p></div></main>

Нехай елемент main має розмір шрифту 10px. Для div задано 2em. Отже, його розмір шрифту буде 20px.

main { font-size: 10px; } div { font-size: 2em; }

Якщо для p також задати 2em, він буде рахувати свій розмір уже від розміру шрифту div, тобто від 20px, а не безпосередньо від 10px у main.

main { font-size: 10px; } div { font-size: 2em; } p { font-size: 2em; }

Послідовне обчислення em

Для вкладених елементів потрібно послідовно визначати розмір шрифту кожного батьківського елемента, починаючи з елемента, для якого задано розмір у px.

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

section { font-size: 10px; } div { font-size: 2em; } p { font-size: 1.5em; }

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

📌 Завдання:

Визначте, який розмір шрифту в px матимуть теги div.
Розмір шрифту section дорівнює 10px.
Для div задано розмір шрифту 2em.

<section><div><p>text</p></div></section>

section { font-size: 10px; } div { font-size: 2em; }

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

Розмір div обчислюється від розміру шрифту section: 10px × 2.

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

10px × 2em = 20px;

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

📌 Завдання:

Визначте, який розмір шрифту в px матимуть теги p.
Розмір шрифту section дорівнює 10px.
Для div задано розмір шрифту 2em.
Для p задано розмір шрифту 1.5em.

<section><div><p>text</p></div></section>

section { font-size: 10px; } div { font-size: 2em; } p { font-size: 1.5em; }

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

Спочатку визначте розмір div: 10px × 2 = 20px. Потім використайте отримані 20px для обчислення розміру p.

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

10px × 2 = 20px; 20px × 1.5 = 30px;

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

📌 Завдання:

Визначте, який розмір шрифту в px матимуть теги p.
Розмір шрифту section дорівнює 40px.
Для div задано розмір шрифту 0.5em.
Для p задано розмір шрифту 0.5em.

<section><div><p>text</p></div></section>

section { font-size: 40px; } div { font-size: 0.5em; } p { font-size: 0.5em; }

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

Спочатку визначте розмір div: 40px × 0.5 = 20px. Потім від отриманих 20px обчисліть розмір p.

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

40px × 0.5 = 20px; 20px × 0.5 = 10px;

❗ Важливо:

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