CSS — Box sizing Nedir?

Merhaba arkadaşlar bugün sizlere CSS tarafında box-sizing özelliği ile HTML elemanlarımızın width ve height değerlerini nasıl kontrol edebileceğimizden bahsetmek istiyorum.

Öncelike box-sizing özelliğini eklemeden iki tane kutu oluşturalım. Bu kutunun belli width,height, padding, margin ve border değerleri olsun.

(Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Result kısmından çıktılarına bakabilirsiniz)

Her iki kutuya da aynı width ve height değerlerini vermemize rağmen neden boyutları farklı oldu? 🤔

Eklediğimiz diğer özelliklere de bir bakalım:

• ilk kutunun padding değerini 24px, margin değerini 24px ve border değerini 4px olarak belirledik.
• İkinci kutunun padding değerini 48px, margin değerini 32px ve border değerini 8px olarak belirledik.

Burada farkedebileceğimiz üzere her iki kutuya aynı width ve height değerlerini vermemize rağmen diğer eklediğimiz CSS özelliklerinden dolayı kutular, farklı boyutlarda ekranda görünürler. Bunun sebebi, her eklediğimiz elemanın içerisinde box-sizing özelliği bulunmaktadır ve bu özelliğin default olarak değeri content-box’tır. Bunun anlamı, kutunun içerisindeki content alanının width ve height değerleri, verdiğimiz değerler olarak kalırken, kutunun ekranda gözükecek olan genişlik ve yükseklik değerleri — varsa eğer — padding ve border değerleri de hesaba katılarak hesaplanır:

width = width + padding + border

Kutunun yüksekliğini de yine aynı şekilde düşünecek olursak:

height = height + padding + border

Şeklinde hesaplanır.

Peki ya margin?

Eklenen margin değerlerin kutunun width ve height değerlerine bir etkisi olmaz çünkü margin değeri kutunun iç kısmı ile değil, dış kısmı ile ilgilenir. Yani bir elemanın diğer elemanlara olan uzaklığı ile ilgilenir.

Sayfaya eklediğimiz bir elemanın içerisinde bulunan yapıları (content, padding, border,margin) daha iyi anlamak için CSS — Box Model Nedir? yazıma göz atabilirsiniz:

CSS — Box Model Nedir?

Yukarıdaki örneğimize geri dönecek olursak:

İlk kutumuzun width değeri 250pxdi. Bunun yanında 24px padding , 4px border değeri bulunmaktadır.

“Tamam! O zaman ilk kutunun width değeri = 250 + 24 + 4px. Yani 278px’dir! 🤓” diyebilirsiniz. Eğer direkt olarak bu değerleri toplarsanız aslında yanlış yapmış olursunuz. Nedenine değinecek olursak:

padding: 24px;dediğimizde aslında kısaltma kullanmış oluruz. Bunu açacak olursak şu değerlere erişiriz:

padding-top: 24px;
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;

Width değerini hesaplarken sağ ve sol padding değerlerini eklememiz gerekir. Bu durumda width + padding-left + padding-right hesaplamasını yaparız. Yani:

250px + 24px + 24px = 298px

Burada aynı mantıkla border: 4px; değerini de düşünecek olursak:

250px + 24px + 24px + 4px + 4px = 306px

Sonuç olarak ilk kutumuzun width değeri 306px olur. Yukarıdaki örneğimizde bulunan ilk kutuya, tarayıcının DevTools’undan baktığımızda kutunun width değerinin 306px olduğunu görebilirsiniz.

Aynı şekilde ilk kutu için height değerini hesapladığımızda 206px sonucuna ulaşırız.

Buradan öğrendiklerimiz ile ikinci kutunun width ve height değerlerinin ne olacağını bulabilir misiniz? 🤓

Evet buraya kadar CSS’in default box-sizing: content-box değerinin nasıl çalıştığına baktık.

Peki istediğimiz width ve height değerlerini kullanabilmek için her seferinde bu hesaplamaları mı yapacağız?

Elbette hayır. Bu aşamada box-sizing: border-box değerinden faydalanabiliriz. İkinci kutuya box-sizing: border-box değerini ekleyelim ve neler olduğuna bakalım:

div:nth-of-type(2) {
  box-sizing: border-box;
  background: purple;
  width: 250px;
  height: 150px;
  padding: 48px;
  margin: 32px;
  border: 8px solid green;
}

Bu durumda padding ve border değerleri dış kısmına etki etmesi yerine iç kısma etki eder. Yani kutunun içerisindeki content kısmı etkiler. Böylelikle width ve height değerleriniz sabit kalırken kutunun content alanı küçülür.

Özetle;

Bir elemana width ve height değerlerini verdiğimizde eğer box-sizing: content-box; özelliğine sahipse content alanın width ve height değerleri bizim verdiğimiz değerleri alırken, elemanın ekranda gözükecek genişlik ve yükseklik değerleri — varsa eğer — border ve padding değerleri eklenerek hesaplanır.

Eğer box-sizing: border-box; özelliğine sahipse, elemanın ekranda görünecek olan width ve height değerleri bizim verdiğimiz width ve height değerlerini alırken, elemanın content alanı — varsa eğer — padding ve border değerleri çıkarılarak hesaplanır.

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Peki bu özelliği her eleman için tek tek yazmak zorundamıyız?

Bu aşamada universal selectors(*) yararlanabiliriz. Tüm elemanların box-sizing özelliğinin default değerini border-box olmasını sağlamak için:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Bu yazının referansları:

box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)

İletişim kanalları: Twitter — LinkedIn — Mail

Bir sonraki yazıda görüşmek üzere!