Πρακτικές χρήσης του em στο CSS

Ας δούμε τον πλήρη κώδικα HTML της σελίδας:

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

Από προεπιλογή, όλες οι ετικέτες της σελίδας έχουν κάποιο mέγεθος γραμματοσειράς. Στην πραγματικότητα, το θέμα είναι ότι η ετικέτα html από προεπιλογή έχει κάποιο mέγεθος γραμματοσειράς:

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;
}