Pratiques d'utilisation des em en CSS

Regardons le code HTML complet de la page :

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

Par défaut, toutes les balises de la page ont une taille de police. En fait, le problème est que la balise html a par défaut une certaine taille de police :

csshtml {
  font-size: 16px; /* valeur par défaut */
}

C'est pourquoi nous pouvons spécifier aux balises de la page des tailles en em. Dans ce cas, elles calculeront leurs tailles par rapport aux parents directs.

Spécifions, par exemple, la taille de police de la balise main :

cssmain {
  font-size: 1.5em; /* correspond à 24px */
}

Et maintenant, spécifions la taille de police de la balise div :

cssdiv {
  font-size: 2em; /* correspond à 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;
}