Наследяване и em единици в CSS

Нека сега имаме по-дълбоко вложяване:

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

Нека тагът main има следния размер на шрифта:

cssmain {
  font-size: 10px;
}

На тага div задаваме размер на шрифта в em:

cssdiv {
  font-size: 2em; /* съответства на 20px */
}

На абзаца също задаваме размер на шрифта в em. В този случай той ще изчислява своя размер спрямо вече изчисления размер на шрифта на div:

cssp {
  font-size: 2em; /* съответства на 40px */
}

Практически задачи

Нека имаме HTML код, за който ще решаваме задачи:

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

Задание 1

Определете какъв размер на шрифта в px ще имат div елементите в резултат на изпълнение на следния код:

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

Задание 2

Определете какъв размер на шрифта в px ще имат абзаците в резултат на изпълнение на следния код:

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

Задание 3

Определете какъв размер на шрифта в px ще имат абзаците в резултат на изпълнение на следния код:

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