Indryk og em-enheder i CSS

Lad os sige, at vi har følgende tags:

html<div>
  <p>
    tekst
  </p>
</div>

Lad os sige, at skriftstørrelsen på afsnittet er angivet i px:

cssp {
  font-size: 20px;
}

Lad os indstille margenen på dette afsnit i enheder em. I dette tilfælde vil størrelsen på indrykket blive beregnet ud fra skriftstørrelsen på afsnittet og ikke dets forælder:

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

Lad os nu sige, at afsnittet får tildelt en størrelse i em:

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

Lad os igen angive margin for vores element. I dette tilfælde vil det stadig blive beregnet ud fra den aktuelle skriftstørrelse på selve elementet. Mens selve skriftstørrelsesværdien vil blive beregnet i forhold til forælderen:

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

Praktiske opgaver

Lad os sige, at vi har HTML-kode, som vi vil løse opgaver for:

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