Indentations et unités em en CSS

Supposons que nous ayons les balises suivantes :

html<div>
  <p>
    text
  </p>
</div>

Supposons que la taille de police du paragraphe soit définie en px :

cssp {
  font-size: 20px;
}

Définissons la marge de ce paragraphe en unités em. Dans ce cas, la taille de l'indentation sera calculée à partir de la taille de police du paragraphe, et non de son parent :

cssp {
  font-size: 20px;
  margin: 2em;  /* correspond à 40px */
}

Supposons maintenant que la taille du paragraphe soit définie en em :

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* correspond à 40px */
}

Définissons à nouveau le margin de notre élément. Dans ce cas, il sera toujours calculé à partir de la valeur actuelle de la police de l'élément lui-même. Alors que la valeur de la police elle-même sera calculée par rapport au parent :

cssdiv {
  font-size: 20px;
}
p {
  font-size: 2em; /* correspond à 40px */
  margin: 2em;    /* correspond à 80px */
}

Tâches pratiques

Supposons que nous ayons un code HTML pour lequel nous allons résoudre des problèmes :

html<section>
  <div>
    <p>
      text
    </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;
}