Kutu modeli nedir, ne içerir ve hangi türleri vardır…

CSS Box Model (Kutu Modeli), HTML öğelerinin sayfada dikdörtgen bloklar olarak nasıl temsil edildiğini tanımlayan soyut bir varlıktır. İçeriğin, iç boşlukların, kenarlıkların ve dış boşlukların boyutlarını ve düzenini belirler.

Kutu modeli aşağıdaki bölümlerden oluşur:

İçerik: Öğenin içeriği (metin, resimler vb.). Boyutu width ve height özellikleriyle belirlenir.
Padding (İç boşluk): Öğenin içeriği ile kenarlığı arasındaki boşluk. padding-top, padding-right, padding-bottom, padding-left veya kısaltma padding özellikleriyle tanımlanır.
Border (Kenarlık): İç boşluk ve içeriğin etrafındaki sınır. border-width, border-style, border-color veya kısaltma border özellikleriyle tanımlanır.
Margin (Dış boşluk): Öğenin kenarlığı ile dıştaki öğeler arasındaki boşluk. margin-top, margin-right, margin-bottom, margin-left veya kısaltma margin özellikleriyle tanımlanır.

İki ana kutu modeli türü vardır, bunlar box-sizing özelliğiyle belirlenir:

content-box (varsayılan değer): width ve height ile belirlenen öğenin genişliği ve yüksekliği sadece içerik alanına aittir. Padding ve Border bu boyutlara eklenir, toplam boyutu artırır.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Toplam boyuta 20px ekler */
  border: 2px solid black; /* Toplam boyuta 4px ekler */
  box-sizing: content-box; /* Varsayılan davranış */
}
/* Öğenin toplam boyutu 124px x 124px olur */

border-box: width ve height ile belirlenen öğenin genişliği ve yüksekliği, içerik, padding ve border'ı içerir. Padding ve Border toplam boyutu artırmaz, içerik alanını daraltır.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Toplam genişliğe/dikdörtgene dahil edilir */
  border: 2px solid black; /* Toplam genişliğe/dikdörtgene dahil edilir */
  box-sizing: border-box;
}
/* Öğenin toplam boyutu 100px x 100px olur */

Daha çok border-box kullanılır, çünkü padding ve border eklenirken boyutların daha öngörülebilir olmasını sağlar. Bu, örneğin, öğelerin belirli yüzdelik genişlikler kaplaması gereken duyarlı düzenler oluştururken kullanışlıdır.

Kutu modeli nedir, ne içerir ve hangi türleri vardır?