Шегіністер және em өлшем бірліктері CSS-те

Бізде келесі тегтер бар делік:

<div>
	<p>
		мәтін
	</p>
</div>

Абзацтың қаріп өлшемі px-те берілсін:

p {
	font-size: 20px;
}

Осы абзацтың марджинін em бірліктерінде орнатайық. Бұл жағдайда шегініс өлшемі оның ата-анасының емес, абзацтың қаріп өлшемінен есептелетін болады:

p {
	font-size: 20px;
	margin: 2em;  /* 40px сәйкес келеді */
}

Енді абзацқа өлшемі em-те берілсін:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px сәйкес келеді */
}

Элементімізге margin орнатайық. Бұл жағдайда ол бұрынғыдай элементтің қазіргі қаріп мәнінен есептелетін болады. Ал қаріп мәнінің өзі ата-анасына қатысты есептелетін болады:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px сәйкес келеді */
	margin: 2em;    /* 80px сәйкес келеді */
}

Практикалық есептер

Біз есептерді шешетін HTML коды бар делік:

<section>
	<div>
		<p>
			мәтін
		</p>
	</div>
</section>

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

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

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

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

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

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

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

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

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

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