Zamiki in em enote v CSS

Recimo, da imamo naslednje oznake:

html<div>
  <p>
    besedilo
  </p>
</div>

Naj bo velikost pisave odstavka nastavljena v px:

cssp {
  font-size: 20px;
}

Nastavimo rob tega odstavka v enotah em. V tem primeru se bo velikost zamika izračunala od velikosti pisave odstavka, ne od njegovega starša:

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

Recimo, da je zdaj odstavku določena velikost v em:

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

Ponovno nastavimo margin našemu elementu. V tem primeru se bo še vedno izračunal od trenutne vrednosti pisave samega elementa. Pri tem pa se bo sama vrednost pisave izračunala glede na starša:

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

Praktične naloge

Recimo, da imamo HTML kodo, za katero bomo reševali naloge:

html<section>
  <div>
    <p>
      besedilo
    </p>
  </div>
</section>

Задание 1

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

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

Задание 2

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

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

Задание 3

Določite, kakšno velikost pisave in zamika v px bodo imele oznake div v rezultatu izvajanja naslednje kode:

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

Задание 4

Določite, kakšno velikost pisave in zamika v px bodo imele oznake p v rezultatu izvajanja naslednje kode:

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

Задание 5

Določite, kakšno velikost pisave in zamika v px bodo imele oznake p v rezultatu izvajanja naslednje kode:

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