Inleiding tot em-eenhede in CSS

Die em-eenhede laat jou toe om die lettergrootte te spesifiseer as 'n persentasie van die ouer se grootte. Kom ons kyk na 'n voorbeeld.

Gestel ons het die volgende geneste merkers:

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

Laat ons die lettergrootte vir ons div spesifiseer:

div {
	font-size: 20px;
}

En vir die paragraaf spesifiseer ons die grootte in 2em. Hierdie waarde kom ooreen met 'n lettergrootte twee keer so groot as die ouer se lettergrootte:

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

Nou spesifiseer ons vir die paragraaf 'n grootte van 0.5em. Hierdie waarde kom ooreen met die helfte van die ouer se lettergrootte:

p {
	font-size: 0.5em; /* kom ooreen met 10px */
}

Die waarde 1em sal die paragraaf se lettergrootte dieselfde maak as dié van die ouer div:

p {
	font-size: 1em; /* kom ooreen met 20px */
}

Praktiese Take

Gestel ons het die volgende HTML-kode, waarvoor ons die take sal oplos:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Bepaal watter lettergrootte in px die li-merkers sal hê as gevolg van die uitvoering van die volgende kode:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Bepaal watter lettergrootte in px die li-merkers sal hê as gevolg van die uitvoering van die volgende kode:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Bepaal watter lettergrootte in px die li-merkers sal hê as gevolg van die uitvoering van die volgende kode:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}