CSS'te em Birimlerine Giriş

em birimleri, yazı tipi boyutunu ebeveynin boyutunun yüzdesi olarak belirlemeye izin verir. Hadi bir örnekle inceleyelim.

Şu şekilde iç içe geçmiş etiketlerimiz olduğunu varsayalım:

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

Hadi div'imize bir yazı tipi boyutu belirleyelim:

div {
	font-size: 20px;
}

Paragrafa ise 2em olarak bir boyut belirleyelim. Bu değer, ebeveynin yazı tipi boyutunun iki katına karşılık gelir:

p {
	font-size: 2em; /* 40px'e karşılık gelir */
}

Şimdi paragrafa 0.5em boyutunu belirleyelim. Bu değer, ebeveyn yazı tipi boyutunun yarısına karşılık gelir:

p {
	font-size: 0.5em; /* 10px'e karşılık gelir */
}

1em değeri, paragrafın yazı tipini ebeveyn div'i ile aynı yapar:

p {
	font-size: 1em; /* 20px'e karşılık gelir */
}

Pratik Görevler

HTML kodumuz olduğunu ve bunun için görevleri çözeceğimizi varsayalım:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Aşağıdaki kodu çalıştırmanın sonucunda li etiketlerinin yazı tipi boyutunun px cinsinden ne olacağını belirleyin:

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

Aşağıdaki kodu çalıştırmanın sonucunda li etiketlerinin yazı tipi boyutunun px cinsinden ne olacağını belirleyin:

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

Aşağıdaki kodu çalıştırmanın sonucunda li etiketlerinin yazı tipi boyutunun px cinsinden ne olacağını belirleyin:

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