CSS’de EM Birimi Nedir?

CSS’de öğelerin boyutlarını belirlemek için göreceli (relative) ve mutlak (absolute) birimler kullanılır. Göreceli birimler, bir öğenin boyutunu başka bir öğeye veya kendi özelliklerine bağlı olarak ayarlamamıza olanak tanır.

Bu yazıda, CSS’de EM (em) birimini detaylı bir şekilde inceleyeceğiz. EM biriminin nasıl çalıştığını, nerelerde kullanılabileceğini ve responsive (duyarlı) tasarımlar oluştururken nasıl avantajlar sağladığını açıklayacağız.

1. EM (em) Birimi Nedir?

EM, bir öğenin font boyutuna göre hesaplanan bir CSS birimidir.

EM, iki farklı şekilde çalışır:

1. Font-size özelliğinde kullanıldığında: Ebeveyn (parent) öğenin font boyutuna göre hesaplanır.
2. Margin, padding, border gibi özelliklerde kullanıldığında: Öğenin kendi font boyutuna göre hesaplanır.

Bunu daha iyi anlamak için birkaç örnek yapalım.

2. EM Kullanımı: Font Size ile

Bir öğeye 1em değeri verirsek, ebeveyn öğenin font boyutu kadar bir değer alır.

Örnek 1: Ebeveyn Font Boyutuna Göre EM Kullanımı

article {
  font-size: 20px;
}

h2 {
  font-size: 2em; /* 2 * 20px = 40px */
}

Burada h2 etiketi, ebeveyn olan article öğesinin font boyutunun 2 katı büyüklüğünde olacaktır.

• article içinde font-size: 20px olduğundan,
• h2 { font-size: 2em } kullanımı 2 * 20px = 40px olarak hesaplanır.

Örnek 2: İç İçe EM Kullanımı

EM kullanırken dikkat edilmesi gereken önemli bir nokta, iç içe geçmiş öğelerde değerlerin katlanarak büyümesidir.

article {
  font-size: 20px;
}

h2 {
  font-size: 2em; /* 2 * 20px = 40px */
}

p {
  font-size: 1.5em; /* 1.5 * 40px = 60px */
}

• Hiyerarşi içinde EM kullanılırsa, her öğe üst öğeye göre hesaplanır ve font boyutları katlanarak büyüyebilir.
• p { font-size: 1.5em } değeri, ebeveyn olan h2 öğesine bağlı olduğu için 1.5 * 40px = 60px olur.

Bu tür durumlar, tasarımda istenmeyen büyük font boyutlarına neden olabilir.

3. EM Kullanımı: Padding, Margin ve Border ile

Font size dışında, padding, margin ve border gibi özelliklerde EM kullanıldığında, öğenin kendi font boyutuna göre hesaplama yapılır.

Örnek 3: EM’in Margin ile Kullanımı

h2 {
  font-size: 40px;
  margin-left: 1em; /* 40px * 1 = 40px */
}

margin-left: 1em ifadesi, öğenin kendi font boyutuna göre hesaplanır.

h2 öğesi 40px font boyutuna sahip olduğu için, margin-left: 40px olur.

Örnek 4: Padding ile Kullanımı

button {
  font-size: 20px;
  padding: 0.5em 1em; /* Üst-alt 10px, sağ-sol 20px */
}

Öğenin font boyutu 20px olduğu için:

• padding: 0.5em 1em → Üst-alt 10px, sağ-sol 20px olur.
• Eğer font-size: 30px olarak değiştirilirse, padding de otomatik olarak artar.

4. EM ile Duyarlı (Responsive) Tasarımlar Oluşturma

EM birimi, öğelerin ebeveyn veya kendi boyutuna göre ölçeklenmesini sağlar.

Responsive tasarımlar oluştururken, öğelerin birbirine orantılı büyüyüp küçülmesini sağlar.

Örnek 5: Duyarlı Bir Buton Tasarımı

button {
  font-size: 1em; /* Ebeveynin font boyutuna bağlı */
  padding: 0.5em 1em; /* Font boyutuna göre büyüyüp küçülür */
  border-radius: 0.5em; /* Yuvarlak köşeler */
  background-color: blue;
  color: white;
}

• Font boyutu değiştikçe, padding ve border radius da orantılı olarak büyüyecek.
• Bu sayede büyük veya küçük butonlar otomatik olarak ölçeklenecek.

5. EM Kullanırken Dikkat Edilmesi Gerekenler

Avantajları:

• Öğeler birbirine orantılı olarak ölçeklenebilir.
• Responsive tasarımlar için uygundur.
• Tek bir değeri değiştirerek tüm bağlı öğeleri değiştirmek mümkündür.

Dezavantajları:

• İç içe geçmiş öğelerde hesaplamalar büyüyebilir ve karmaşık hale gelebilir.
• Bazı durumlarda istemeden büyük veya küçük boyutlar oluşabilir.

Çözüm: Eğer EM kullanırken kontrolü kaybetmek istemiyorsanız, bir sonraki konumuz olan REM birimini kullanabilirsiniz.

6. EM ile Piksel (px) Karşılaştırması

7. Sonuç: EM Kullanımı ile Esnek Tasarımlar

CSS’de EM birimi, öğelerin font boyutuna göre ölçeklenmesini sağlayarak esnek ve duyarlı (responsive) tasarımlar oluşturmanıza yardımcı olur.

Öğrendiğimiz konular:

• EM, ebeveyn veya kendi font boyutuna göre hesaplanır.
• Font size, padding, margin gibi özelliklerde kullanılır.
• Responsive tasarımlar için uygundur.
• Piksel yerine kullanıldığında esneklik sağlar.

Bir sonraki konuda, EM’in bazı sorunlarını çözen REM birimini inceleyeceğiz.

EM birimini kullanarak tasarımlarınızı daha esnek hale getirebilir ve modern web siteleri oluşturabilirsiniz.