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:

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

Hadi div'imize bir yazı tipi boyutu belirleyelim:

cssdiv {
  font-size: 20px;
}

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

cssp {
  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:

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

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

cssp {
  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:

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

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

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

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