CSSтегиндеги эм бирдиги жана таянчулар

Бизде төмөнкү тегдер бар дейли:

html<div>
  <p>
    текст
  </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>
      текст
    </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;
}