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