Bevezetés az em egységekbe a CSS-ben

Az em egységek lehetővé teszik a betűméret beállítását a szülő elem méretéhez viszonyított százalékban. Nézzük meg egy példán.

Tegyük fel, hogy vannak beágyazott tagjaink:

<div>
	<p>
		szöveg
	</p>
</div>

Állítsuk be a betűméretet a div elemünknek:

div {
	font-size: 20px;
}

A bekezdésnek pedig állítsuk be a méretet 2em-re. Ez az érték a szülő betűméretének kétszeresének felel meg:

p {
	font-size: 2em; /* 40px-nek felel meg */
}

Most állítsuk a bekezdés méretét 0.5em-re. Ez az érték a szülő betűméretének felének felel meg:

p {
	font-size: 0.5em; /* 10px-nek felel meg */
}

Az 1em érték a bekezdés betűméretét ugyanakkora lesz, mint a szülő div-é:

p {
	font-size: 1em; /* 20px-nek felel meg */
}

Gyakorlati feladatok

Tegyük fel, hogy van egy HTML kódunk, amelyre feladatokat fogunk megoldani:

<ul>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>

Határozza meg, mekkora betűméret px-ben lesz a li tag-eknek a következő kód végrehajtása eredményeképpen:

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

Határozza meg, mekkora betűméret px-ben lesz a li tag-eknek a következő kód végrehajtása eredményeképpen:

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

Határozza meg, mekkora betűméret px-ben lesz a li tag-eknek a következő kód végrehajtása eredményeképpen:

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