Atkāpes un em vienības CSS

Pieņemsim, ka mums ir šādi elementi:

<div>
	<p>
		teksts
	</p>
</div>

Pieņemsim, ka rindkopas fonta izmērs ir iestatīts px:

p {
	font-size: 20px;
}

Iestatīsim šīs rindkopas atkāpi mērvienībās em. Šajā gadījumā atkāpes lielums tiks aprēķināts no rindkopas fonta izmēra, nevis no tās vecāka elementa izmēra:

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

Pieņemsim, ka tagad rindkopai ir norādīts izmērs em:

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

Vēlreiz iestatīsim margin mūsu elementam. Šajā gadījumā tas joprojām tiks aprēķināts no paša elementa pašreizējā fonta izmēra. Savukārt pati fonta izmēra vērtība tiks aprēķināta attiecībā pret vecākelementu:

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

Praktiskie uzdevumi

Pieņemsim, ka mums ir HTML kods, kuram mēs risināsim uzdevumus:

<section>
	<div>
		<p>
			teksts
		</p>
	</div>
</section>

Nosakiet, kāds fonta izmērs un atkāpe px būs elementiem div šāda koda izpildes rezultātā:

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

Nosakiet, kāds fonta izmērs un atkāpe px būs elementiem div šāda koda izpildes rezultātā:

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

Nosakiet, kāds fonta izmērs un atkāpe px būs elementiem div šāda koda izpildes rezultātā:

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

Nosakiet, kāds fonta izmērs un atkāpe px būs elementiem p šāda koda izpildes rezultātā:

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

Nosakiet, kāds fonta izmērs un atkāpe px būs elementiem p šāda koda izpildes rezultātā:

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