CSS Box Model, bir HTML elementinin boyutunu ve konumunu belirlerken kullanılan bir modeldir. Bu model, her elementin iç içe geçmiş bir dizi kutudan oluştuğunu varsayar.
En içteki kutu, elementin içeriğini (metin, görüntüler vb.) tutar. İçerik kutusunun etrafında, içerik ile kenarlık arasındaki boşluğu belirleyen bir dolgu kutusu vardır. Dolgu kutusundan sonra, kenarlığı temsil eden bir kenarlık kutusu gelir. Son olarak, dış kutu olan sınır kutusu, elementin tam boyutunu belirler.
Bununla birlikte, CSS Box Model’inin karmaşık bir özellik olduğunu kabul ediyorum. Bu nedenle, örnekler kullanarak Box Model’inin nasıl çalıştığını açıklamayı tercih ederim.
Örneğin, şöyle bir HTML kodu düşünelim:
<div class="box">Hello World!</div>
Bu kod, basit bir div elementi içerir ve bu elementin boyutunu CSS Box Model’i kullanarak belirlemek istiyoruz.
CSS’te bir elementin boyutunu belirlemek için genellikle width ve height değerleri kullanılır. Ancak, bu değerler sadece içerik kutusunu etkiler ve dolgu, kenarlık veya sınır kutularını etkilemez.
Örneğin, şöyle bir CSS kodu yazdığımızı düşünelim:
.box {
width: 200px;
height: 100px;
}
Bu kod, .box sınıfına sahip div elementinin içerik kutusunu 200 piksel genişliğinde ve 100 piksel yüksekliğinde yapar. Ancak, dolgu, kenarlık ve sınır kutuları hala varsayılan boyutlarındadır ve bu nedenle elementin toplam boyutu daha büyük olacaktır.
Bu durumu anlamak için, farklı özelliklerin nasıl etkili olduğunu gösteren aşağıdaki örneği inceleyebilirsiniz:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
}
Bu kodda, .box sınıfına sahip div elementi için 20 piksel dolgu ve 5 piksel kalınlığında siyah kenarlık belirtilmiştir. Bu özellikler elementin toplam boyutunu etkiler ve sonuç olarak, elementin görsel boyutu aşağıdaki gibi olacaktır:
Gördüğünüz gibi, içerik kutusu boyutu 200×100 piksel iken, dolgu, kenarlık ve sınır kutuları elementin toplam boyutunu arttırır.
