Prácticas de uso de em en CSS

Veamos el código HTML completo de la página:

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

Por defecto, todas las etiquetas de la página tienen un cierto tamaño de fuente. En realidad, el asunto es que la etiqueta html tiene por defecto un cierto tamaño de fuente:

csshtml {
  font-size: 16px; /* valor por defecto */
}

Por lo tanto, podemos especificar a las etiquetas de la página dimensiones en em. Al hacerlo, calcularán sus dimensiones relativas a los padres directos.

Vamos, por ejemplo, a especificar el tamaño de fuente de la etiqueta main:

cssmain {
  font-size: 1.5em; /* corresponde a 24px */
}

Y ahora especifiquemos el tamaño de fuente de la etiqueta div:

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