Урок 79 із 104
76%
← Назад

Введення в одиниці em у CSS

Вивчаємо одиницю em у CSS та визначаємо розмір шрифту відносно розміру шрифту батьківського елемента.

Що таке em

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

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

<div><p>text</p></div>
div { font-size: 20px; } p { font-size: 2em; }

Значення 0.5em

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

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

Значення 1em

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

div { font-size: 20px; } p { font-size: 1em; }

Як визначити розмір у px

Щоб перевести em у пікселі, потрібно розмір шрифту батьківського елемента помножити на значення em.

розмір у px = розмір шрифту батьківського елемента × значення em
  • 1em — такий самий розмір, як у батьківського елемента.
  • 2em — удвічі більший розмір.
  • 0.5em — удвічі менший розмір.
  • 1.5em — у півтора раза більший розмір.

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

📌 Завдання:
  1. Визначте, який розмір шрифту в px матимуть теги li.
  2. Батьківський елемент ul має розмір шрифту 10px.
  3. Для li задано розмір шрифту 2em.
<ul><li>text</li><li>text</li><li>text</li></ul>
ul { font-size: 10px; } li { font-size: 2em; }
💡 Показати підказку

Помножте розмір шрифту ul на значення em: 10px × 2.

✅ Показати відповідь
10px × 2em = 20px;

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

📌 Завдання:
  1. Визначте, який розмір шрифту в px матимуть теги li.
  2. Батьківський елемент ul має розмір шрифту 20px.
  3. Для li задано розмір шрифту 1.5em.
<ul><li>text</li><li>text</li><li>text</li></ul>
ul { font-size: 20px; } li { font-size: 1.5em; }
💡 Показати підказку

Помножте розмір шрифту ul на значення em: 20px × 1.5.

✅ Показати відповідь
20px × 1.5em = 30px;

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

📌 Завдання:
  1. Визначте, який розмір шрифту в px матимуть теги li.
  2. Батьківський елемент ul має розмір шрифту 30px.
  3. Для li задано розмір шрифту 0.5em.
<ul><li>text</li><li>text</li><li>text</li></ul>
ul { font-size: 30px; } li { font-size: 0.5em; }
💡 Показати підказку

Помножте розмір шрифту ul на значення em: 30px × 0.5.

✅ Показати відповідь
30px × 0.5em = 15px;
❗ Важливо:

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