Шегіністер және em өлшем бірліктері 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>

Задание 1

Келесі код орындалғаннан кейін div тегтерінің px-тегі қаріп өлшемі мен шегінісі қандай болатынын анықтаңыз:

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

Задание 2

Келесі код орындалғаннан кейін div тегтерінің px-тегі қаріп өлшемі мен шегінісі қандай болатынын анықтаңыз:

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

Задание 3

Келесі код орындалғаннан кейін div тегтерінің px-тегі қаріп өлшемі мен шегінісі қандай болатынын анықтаңыз:

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

Задание 4

Келесі код орындалғаннан кейін p тегтерінің px-тегі қаріп өлшемі мен шегінісі қандай болатынын анықтаңыз:

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

Задание 5

Келесі код орындалғаннан кейін p тегтерінің px-тегі қаріп өлшемі мен шегінісі қандай болатынын анықтаңыз:

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