Nedir bu em, rem?

em Birimi

em kullanıldığı tagın kapsayıcısındaki font-size özelliğine bakarak oluşturulan bir değerdir, yani mevcut öğenin kapsayıcısının yazı tipi boyutuna göre hesaplanan bir ölçü birimidir. Örneğin, bir öğenin kapsayıcısının yazı tipi boyutu 16 piksel ise, 1em 16 piksele eşittir. Kapsayıcının font-size değerini 20 px yaptığınızda 1em 20 pixsel olacaktır. Buradaki kapsayıcı tagı içine alan taglardan içden dışa doğru yani en yakın font-size değerine sahip olan tagdır. En son html tagına kadar gider. Hiç birinde font-size değeri verilmemişse browserın default değeri 16px e göre hesap yapar. Örneğin

Yukarıda ki kodu incelediğinizde parent classına sahip olan div 16px font-size a sahip olduğu için childe clasına sahip olan div 1,5 em den 24px boyutuna sahip olacaktır. Ancak grandchild classına sahip divin kapsayıcısı child classına sahip olan div olduğundan grandchild için 1 em değeri 24px olur ve 2em verildiğinde alacağı değer 48px olacaktır.

rem Birimi

rem, kök (root) öğesinin yazı tipi boyutuna göre hesaplanan bir ölçü birimidir. Genellikle HTML öğesinin yazı tipi boyutunu temel alır ve bu değer genellikle tarayıcılar tarafından 16 piksel olarak ayarlanmıştır. rem birimi, tüm belgede tutarlı ölçümler kullanmayı kolaylaştırır.

Karşılaştırma

em : İçinde bulunduğu öğenin yazı tipi boyutuna göre hesaplanır.

rem: Kök öğesinin yazı tipi boyutuna göre hesaplanır.

em birimi iç içe geçmiş öğelerde karmaşıklık yaratabilirken, rem birimi daha tutarlı ve öngörülebilir ölçümler sağlar. Bu yüzden, genellikle tutarlılığı sağlamak için rem kullanılması tercih edilir.