CSS да отступлар ва em ўлчов бирликлари

Фарз қилайлик, бизда куйидаги теглар бор:

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