Dhëmbëzimet dhe njësitë em në CSS

Le të supozojmë se kemi etiketat e mëposhtme:

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

Le të supozojmë se madhësia e fontit të paragrafit është e vendosur në px:

p {
	font-size: 20px;
}

Le të vendosim marginin e këtij paragrafi në njësi em. Në këtë rast, madhësia e dhëmbëzimit do të llogaritet nga madhësia e fontit të paragrafit, dhe jo e prindit të tij:

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

Le të supozojmë tani që paragrafi ka një madhësi të vendosur në em:

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

Le të vendosim përsëri margin elementit tonë. Në këtë rast, ai prapë do të llogaritet nga vlera aktuale e fontit të vetë elementit. Ndërkohë, vetë vlera e fontit do të llogaritet në lidhje me prindin:

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

Detyra praktike

Le të supozojmë se kemi kodin HTML, për të cilin ne do të zgjidhim detyra:

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

Përcaktoni, çfarë madhësie fonti dhe dhëmbëzimi në px do të kenë etiketat div në rezultat të ekzekutimit të kodit në vijim:

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

Përcaktoni, çfarë madhësie fonti dhe dhëmbëzimi në px do të kenë etiketat div në rezultat të ekzekutimit të kodit në vijim:

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

Përcaktoni, çfarë madhësie fonti dhe dhëmbëzimi në px do të kenë etiketat div në rezultat të ekzekutimit të kodit në vijim:

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

Përcaktoni, çfarë madhësie fonti dhe dhëmbëzimi në px do të kenë etiketat p në rezultat të ekzekutimit të kodit në vijim:

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

Përcaktoni, çfarë madhësie fonti dhe dhëmbëzimi në px do të kenë etiketat p në rezultat të ekzekutimit të kodit në vijim:

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