CSS em nedir?

CSS’te em, bir öğenin yazı tipi boyutunu temel alan göreli ölçü birimidir. Birçok özellikte 1em, o öğenin hesaplanmış font-size değerine eşittir. font-size özelliğinin kendisinde kullanıldığında ise referans, öğenin kendi değeri değil üst öğeden miras aldığı yazı tipi boyutudur.

Bu nedenle em kullanan bir bileşen, yazı tipi büyüdüğünde boşluklarını ve boyutlarını da orantılı biçimde büyütebilir. Ancak iç içe öğelerde em değerleri birbirinin üzerine uygulanır; bu da beklenenden büyük veya küçük sonuçlara yol açabilir.

em nasıl hesaplanır?​

Varsayılan yazı tipi boyutunun 16px olduğunu ve bir kartın font-size: 20px kullandığını varsayalım. Bu kartta padding: 1em 1.5em yazılırsa dikey iç boşluk 20px, yatay iç boşluk 30px olur. Kartın başlığı font-size: 1.25em ise başlığın boyutu, karttan miras alınan 20px üzerinden hesaplanır ve 25px olur.

font-size için temel kural şöyledir:

• Bir öğenin font-size değeri 1.5em ise hesaplama üst öğenin yazı tipi boyutuna göre yapılır.
• padding, margin, gap, border-radius ve width gibi diğer özelliklerde em, o öğenin kendi hesaplanmış yazı tipi boyutunu temel alır.
• İç içe em kullanan öğelerde her seviye kendi üst öğesinin sonucunu temel alır.

Çalışan en küçük örnek​

Aşağıdaki kodu bir HTML dosyasına yerleştirip tarayıcıda açabilirsiniz:


Beklenen sonuçta kartın yazı boyutu 20px, yatay iç boşluğu 30px ve başlığın yazı boyutu 25px olur. Kenarlık görünmüyor veya ölçüler beklenenden farklıysa öncelikle tarayıcı geliştirici araçlarında kartın ve başlığın hesaplanmış font-size değerlerini kontrol edin. Üst öğede başka bir yazı tipi boyutu tanımlıysa em hesabı, varsayılan 16px yerine o değeri kullanır.

Bu örnekte kartın yazı boyutunu 24px yaparsanız iç boşluklar ve başlık da orantılı olarak büyür. Bu, bileşenin ölçeklenmesini istediğiniz durumlarda em kullanımının temel avantajıdır.

em ne zaman, rem ne zaman?​

Seçim, ölçünün hangi yazı tipi boyutuna bağlı kalmasını istediğinize göre yapılmalıdır:


Örneğin kartın tamamı farklı yazı boyutlarında bağımsız olarak aynı iç boşluğu korumalıysa rem daha öngörülebilir olabilir. Kartın büyütülmesiyle boşlukların da büyümesi isteniyorsa em daha uygundur. Büyük arayüzlerde, iç içe bileşenlerin zincirleme büyümesini önlemek için dış yerleşimde rem, bileşenin kendi iç ölçeklemesinde em birlikte kullanılabilir.

Sık yapılan hatalar​

• Birden fazla iç içe öğede font-size: 1.2em kullanıp sonucu sabit sanmak: Her seviye bir önceki hesaplanmış değeri büyütür.
• padding: 2em değerini her zaman 32px sanmak: Bu değer yalnızca ilgili öğenin yazı boyutu 16px ise 32px olur.
• Küçük ve hassas simge boyutlarında em kullanıp üst öğe yazı boyutu değişince simgenin de istemeden büyümesine izin vermek.
• Hesabı yalnız kaynak CSS’ye bakarak yapmak: Miras, tarayıcı varsayılanları ve daha yüksek öncelikli kurallar hesaplanmış değeri değiştirebilir.

Kaynaklar​

• MDN: CSS uzunluk birimleri

Sık sorulan sorular​

em ondalık değer alabilir mi?​

Evet. 0.875em veya 1.25em gibi değerler geçerlidir. Sonuç, tarayıcı tarafından piksel cinsinden hesaplanır ve gerektiğinde alt piksel değerleriyle işlenir.

em ile yüzde aynı şey midir?​

Hayır. Bazı özelliklerde benzer sonuç verebilirler; ancak yüzde biriminin referansı özelliğe göre değişebilir. em ise yazı tipi boyutuna bağlıdır. Bu nedenle aynı sayısal değeri kullanmak iki birimin her özelliğinde eşdeğer sonuç vermez.