Inspringe en em-eenhede in CSS

Laat ons die volgende etikette hê:

<div>
	<p>
		teks
	</p>
</div>

Laat die lettergrootte van die paragraaf in px gestel wees:

p {
	font-size: 20px;
}

Kom ons stel die marge van hierdie paragraaf in eenhede em. In hierdie geval sal die grootte van die inspringing bereken word vanaf die lettergrootte van die paragraaf, en nie van sy ouer nie:

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

Laat die paragraaf nou 'n grootte in em toegeken word:

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

Kom ons ken weer 'n margin aan ons element toe. In hierdie geval sal dit steeds bereken word vanaf die huidige lettergroottewaarde van die element self. Terwyl die lettergroottewaarde self bereken word relatief tot die ouer:

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

Praktiese take

Laat ons HTML-kode hê waarvoor ons probleme sal oplos:

<section>
	<div>
		<p>
			teks
		</p>
	</div>
</section>

Bepaal watter lettergrootte en inspringing in px die etikette div sal hê as gevolg van die uitvoering van die volgende kode:

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

Bepaal watter lettergrootte en inspringing in px die etikette div sal hê as gevolg van die uitvoering van die volgende kode:

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

Bepaal watter lettergrootte en inspringing in px die etikette div sal hê as gevolg van die uitvoering van die volgende kode:

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

Bepaal watter lettergrootte en inspringing in px die etikette p as gevolg van die uitvoering van die volgende kode sal hê:

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

Bepaal watter lettergrootte en inspringing in px die etikette p as gevolg van die uitvoering van die volgende kode sal hê:

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