Урок 81 із 104
78%
← Назад

Відступи та одиниці em у CSS

Вивчаємо використання одиниці em для відступів та визначаємо розмір шрифту й margin у пікселях для вкладених елементів.

Одиниця em у margin

Одиниця em може використовуватися не тільки для font-size, а й для відступів, зокрема margin та padding.

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

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

em у font-size та margin

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

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

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

  • Спочатку визначаємо фактичний font-size елемента.
  • Якщо font-size задано в em, обчислюємо його від font-size батьківського елемента.
  • Після цього значення em у margin обчислюємо від фактичного font-size самого елемента.
section { font-size: 10px; } div { font-size: 2em; margin: 3em; }

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

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

Спочатку визначте font-size div: 10px × 2 = 20px. Потім визначте margin від отриманих 20px.

✅ Показати відповідь
font-size: 10px × 2 = 20px; margin: 20px × 2 = 40px;

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

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

Спочатку визначте font-size div: 10px × 2 = 20px. Потім помножте 20px на 3.

✅ Показати відповідь
font-size: 10px × 2 = 20px; margin: 20px × 3 = 60px;

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

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

Спочатку визначте font-size div: 10px × 2 = 20px. Потім помножте 20px на 0.5.

✅ Показати відповідь
font-size: 10px × 2 = 20px; margin: 20px × 0.5 = 10px;

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

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

Спочатку визначте font-size div: 10px × 2 = 20px. Потім font-size p: 20px × 2 = 40px. Margin p обчислюється від його власного font-size.

✅ Показати відповідь
font-size div: 10px × 2 = 20px; font-size p: 20px × 2 = 40px; margin p: 40px × 2 = 80px;

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

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

Спочатку визначте font-size div: 10px × 1.5 = 15px. Потім font-size p: 15px × 1 = 15px. Margin p обчисліть від 15px.

✅ Показати відповідь
font-size div: 10px × 1.5 = 15px; font-size p: 15px × 1 = 15px; margin p: 15px × 1.5 = 22.5px;
❗ Важливо:

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