CSS Box Sizing

CSS Box Sizing

CSS box-sizing özelliği, elementin toplam genişliği ve yüksekliğini içeren iç dolgu (dolgu) ve çerçeve içerir.

CSS box-sizing özelliği belirtilmemişse

Varsayılan olarak, elementin genişliği ve yüksekliği şu şekilde hesaplanır:

  • width + padding + border = elementin gerçek genişliği
  • height + padding + border = elementin gerçek yüksekliği

Bu demek oluyor ki: Bir elementin genişlik/yüksekliğini ayarladığınızda, genellikle daha büyük görünür (çünkü elementin çerçevesi ve iç dolgu, belirtilen genişlik/yüksekliğe eklenmiştir).

Aşağıdaki resim, aynı belirtilen genişlik ve yüksekliğe sahip iki <div> elementini gösterir:

Bu div daha küçük
(genişliği 300px, yüksekliği 100px).
Bu div daha büyük
genişliği de 300px, yüksekliği 100px).

Yukarıdaki iki <div> elementi nihai sonuçta farklı boyutlarda görünüyor (çünkü div2 iç dolgu belirtilmiştir):

Örnek

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Kişisel Deneyim

box-sizing bu sorunu çözen bir özelliktir.

CSS box-sizing özelliğini kullanarak

box-sizing özellik, elementin toplam genişliği ve yüksekliğini içeren bir özellik sağlar.

Bir elemente aşağıdaki özellikler atanmışsa box-sizing: border-box;dahil edilirse, genişlik ve yükseklik iç dolgu ve çerçeve içermelidir:

Şimdi iki div boyutları aynı!
Hooray!

Bu örnek, önceki örnekle aynıdır, iki <div> elementi de aşağıdaki özellikleri ayarlanmıştır box-sizing: border-box;：

Örnek

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Kişisel Deneyim

Kullanım box-sizing: border-box; tarzında, birçok geliştirici sayfadaki tüm elementlerin bu şekilde çalışmasını istemektedir.

Aşağıdaki kod, tüm elementlerin bu daha anlaşılır şekilde büyütülmesini sağlar. Birçok tarayıcı, bu etkiliyi birçok form elementi üzerinde kullanmıştır box-sizing: border-box;（Fakat hepsi değil - bu nedenle input ve textarea width: 100%; olarak görünürken farklı görünüyorlar).

Bunu tüm elementlere uygulamak güvenli ve akıllıcadır:

Örnek

* {
  box-sizing: border-box;
}

Kişisel Deneyim

CSS Box Sizing Özelliği

Özellik Tanım
box-sizing Eleman genişliğini ve yüksekliğini hesaplama yöntemini tanımlar: onların iç dolgu (padding) ve çerçeve (border) içerip içermediği.