Меросият ва воҳидҳои em дар CSS

Бигзор акнун мо ба ғавсӣ рафтани зиёд дорем:

html<main>
  <div>
    <p>
      матн
    </p>
  </div>
</main>

Бигзор теги main андозаи зеринро дошта бошад:

cssmain {
  font-size: 10px;
}

Ба теги div андозаи ҳарфро бо em муайян кунем:

cssdiv {
  font-size: 2em; /* ба 20px мувофиқат мекунад */
}

Ба параграф низ андозаи ҳарфро бо em муайян кунем. Дар ин ҳолат он андозаи ҳарфи худро нисбат ба андозаи аллакай ҳисобшудаи ҳарфи див ҳисоб мекунад:

cssp {
  font-size: 2em; /* ба 40px мувофиқат мекунад */
}

Масъалаҳои амалӣ

Бигзор мо рамзи HTML-ро дорем, ки барои он мо масъалаҳоро ҳал мекунем:

html<section>
  <div>
    <p>
      матн
    </p>
  </div>
</section>

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

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

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