Практики за користење на em во CSS

Да го погледнеме целосниот HTML код на страницата:

html<html>
  <head>
    <title></title>
  </head>
  <body>
    <main>
      <div>
        <p>
          text
        </p>
      </div>
    </main>
  </body>
<html>

По правило, сите тагови на страницата имаат одредена големина на фонтот. Всушност, работата е во тоа што тагот html по правило има одредена големина на фонтот:

csshtml {
  font-size: 16px; /* стандардна вредност */
}

Затоа можеме да им назначиме на таговите на страницата големини во em. При тоа, тие ќе ги пресметуваат своите големини во однос на непосредните родители.

Да ја назначиме, на пример, големината на фонтот на тагот main:

cssmain {
  font-size: 1.5em; /* одговара на 24px */
}

А сега да ја назначиме големината на фонтот на тагот div:

cssdiv {
  font-size: 2em; /* одговара на 48px */
}

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

cssmain {
  margin: 16px auto;
}

h1 {
  font-size: 32px;
}
p {
  font-size: 32px;
}

cssmain {
  margin: 32px auto;
}

h1 {
  font-size: 32px;
}
div {
  font-size: 16px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
}