Overerving en em-eenheden in CSS

Stel dat we nu een diepere genesting hebben:

html<main>
  <div>
    <p>
      tekst
    </p>
  </div>
</main>

Stel dat de tag main de volgende lettergrootte heeft:

cssmain {
  font-size: 10px;
}

Laten we voor de tag div een lettergrootte in em instellen:

cssdiv {
  font-size: 2em; /* komt overeen met 20px */
}

Laten we ook voor de alinea een lettergrootte in em instellen. In dit geval zal het zijn grootte berekenen ten opzichte van de reeds berekende lettergrootte van de div:

cssp {
  font-size: 2em; /* komt overeen met 40px */
}

Praktische opdrachten

Stel we hebben de HTML code, waarvoor we opdrachten zullen oplossen:

html<section>
  <div>
    <p>
      tekst
    </p>
  </div>
</section>

Задание 1

Bepaal welke lettergrootte in px de div's zullen hebben als resultaat van het uitvoeren van de volgende code:

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

Задание 2

Bepaal welke lettergrootte in px de alinea's zullen hebben als resultaat van het uitvoeren van de volgende code:

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

Задание 3

Bepaal welke lettergrootte in px de alinea's zullen hebben als resultaat van het uitvoeren van de volgende code:

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