Παρεμβολές και μονάδες em στο CSS

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

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

Ας υποθέσουμε ότι το μέγεθος γραμματοσειράς της παραγράφου ορίζεται σε px:

cssp {
  font-size: 20px;
}

Ας ορίσουμε το περιθώριο αυτής της παραγράφου σε μονάδες em. Σε αυτή την περίπτωση το μέγεθος της παρεμβολής θα υπολογίζεται από το μέγεθος γραμματοσειράς της παραγράφου, και όχι από τον γονέα της:

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

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

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

Ας ορίσουμε ξανά το margin στο στοιχείο μας. Σε αυτή την περίπτωση θα υπολογίζεται όπως πριν από την τρέχουσα τιμή γραμματοσειράς του ίδιου του στοιχείου. Ενώ η ίδια η τιμή γραμματοσειράς θα υπολογίζεται σε σχέση με τον γονέα:

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* αντιστοιχεί σε 40px */
  margin: 2em;    /* αντιστοιχεί σε 80px */
}

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

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

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

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 2em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 3em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 0.5em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}
p {
  font-size: 2em;
  margin: 2em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 1.5em;
}
p {
  font-size: 1em;
  margin: 1.5em;
}