Atitraukimai ir em vienetai CSS

Tarkime, kad turime šias žymes:

<div>
	<p>
		text
	</p>
</div>

Tarkime, kad pastraipos šrifto dydis nustatytas px:

p {
	font-size: 20px;
}

Nustatykime šios pastraipos paraštę vienetais em. Šiuo atveju atitraukimo dydis bus skaičiuojamas nuo pastraipos šrifto dydžio, o ne nuo jos tėvinio elemento:

p {
	font-size: 20px;
	margin: 2em;  /* atitinka 40px */
}

Tarkime, kad pastraipai dabar nustatytas dydis em:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* atitinka 40px */
}

Vėl nustatykime margin mūsų elementui. Šiuo atveju jis vis tiek bus skaičiuojamas nuo esamos elemento šrifto reikšmės. Tuo pat metu pati šrifto reikšmė bus skaičiuojama tėvinio elemento atžvilgiu:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* atitinka 40px */
	margin: 2em;    /* atitinka 80px */
}

Praktinės užduotys

Tarkime, kad turime HTML kodą, kuriam spręsime užduotis:

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

Nustatykite, kokį šrifto dydį ir atitraukimą px turės žymės div vykdant šį kodą:

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

Nustatykite, kokį šrifto dydį ir atitraukimą px turės žymės div vykdant šį kodą:

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

Nustatykite, kokį šrifto dydį ir atitraukimą px turės žymės div vykdant šį kodą:

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

Nustatykite, kokį šrifto dydį ir atitraukimą px turės žymės p vykdant šį kodą:

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

Nustatykite, kokį šrifto dydį ir atitraukimą px turės žymės p vykdant šį kodą:

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