Отстъпи и мерни единици em в CSS

Да предположим, че имаме следните тагове:

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