Εισαγωγή στις μονάδες em στο CSS

Οι μονάδες em επιτρέπουν τον καθορισμό του μεγέθους γραμματοσειράς ως ποσοστό του μεγέθους του γονέα. Ας δούμε ένα παράδειγμα.

Ας υποθέσουμε ότι έχουμε τις ακόλουθες ένθετες ετικέτες:

html<div>
  <p>
    κείμενο
  </p>
</div>

Ας ορίσουμε το μέγεθος γραμματοσειράς για το div μας:

cssdiv {
  font-size: 20px;
}

Και για την παράγραφο ας ορίσουμε μέγεθος σε 2em. Αυτή η τιμή αντιστοιχεί σε γραμματοσειρά δύο φορές μεγαλύτερη από το μέγεθος γραμματοσειράς του γονέα:

cssp {
  font-size: 2em; /* αντιστοιχεί σε 40px */
}

Τώρα ας ορίσουμε για την παράγραφο μέγεθος σε 0.5em. Αυτή η τιμή αντιστοιχεί στο μισό μέγεθος γραμματοσειράς του γονέα:

cssp {
  font-size: 0.5em; /* αντιστοιχεί σε 10px */
}

Η τιμή 1em θα κάνει τη γραμματοσειρά της παραγράφου ίδια με αυτή του γονικού div:

cssp {
  font-size: 1em; /* αντιστοιχεί σε 20px */
}

Πρακτικές Ασκήσεις

Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα HTML, για τον οποίο θα λύσουμε τις ασκήσεις:

html<ul>
  <li>κείμενο</li>
  <li>κείμενο</li>
  <li>κείμενο</li>
</ul>

cssul {
  font-size: 10px;
}
li {
  font-size: 2em;
}

cssul {
  font-size: 20px;
}
li {
  font-size: 1.5em;
}

cssul {
  font-size: 30px;
}
li {
  font-size: 0.5em;
}