Atitraukimai ir em vienetai CSS

Tarkime, kad turime šias žymes:

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

Tarkime, kad pastraipos šrifto dydis nustatytas px:

cssp {
  font-size: 20px;
}

Nustatykime šios pastraipos paraštę vienetais em. Šiuo atveju atitraukimo dydis bus skaičiuojamas nuo pastraipos šrifto dydžio, o ne nuo jos tėvinio elemento:

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

Tarkime, kad pastraipai dabar nustatytas dydis em:

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

Vėl nustatykime margin mūsų elementui. Šiuo atveju jis vis tiek bus skaičiuojamas nuo esamos elemento šrifto reikšmės. Tuo pat metu pati šrifto reikšmė bus skaičiuojama tėvinio elemento atžvilgiu:

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

Praktinės užduotys

Tarkime, kad turime HTML kodą, kuriam spręsime užduotis:

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;
}