Наследување и единици 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

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