JavaScript için CSS'de Element Genişlemesi

CSS özellikleri width ve height ayarlamak, elementin belirtilen boyuta geleceğini garanti etmez. Hadi örneklere bakalım.

Örnek

Şu anda elementin boyutları belirtilenlerle aynı:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Örnek

Şimdi elemente padding özelliğini ayarlayalım. Sonuçta, elementin gerçek genişliği büyüyecek ve iç boşluk için belirlenen değer kadar genişleyecek:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Örnek

Kenarlığın varlığı da elementi genişletir:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Örnek

box-sizing özelliği yukarıda açıklanan davranışı değiştirmeye izin verir. İç boşluğun veya kenarlığın elementi genişletmemesini sağlayabilirsiniz. Bunun için bu özelliğe border-box değeri atanmalıdır:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Açıklananın Önemi

JavaScript açısından bakıldığında, açıklanan durum pek kullanışlı değildir. Çünkü, width özelliğinin değerini okuduğumuzda, elementin tam olarak bu genişlikte olacağından hiç emin olamayız.