CSS Kutu Modeli Nedir?

CSS kutu modeli, HTML öğelerinin dış görünümünü belirleyen temel bir kavramdır. Bir HTML öğesi, içerikten (content), dolaylı içerikten (padding), sınırdan (border) ve dış boşluktan (margin) oluşan dört ana bileşen içerir. Bu bileşenler, bir kutu içinde yer alır ve bir öğenin genel boyutunu, içeriğini, dolaylı içeriğini, sınırını ve dış boşluğunu belirler.

İşte CSS kutu modelinin ana bileşenleri:

1. İçerik (Content):

   • HTML öğesinin gerçek içeriğini temsil eder. Metin, resim veya diğer içerik öğelerini içerir.

2. Dolaylı İçerik (Padding):

   • İçerik ile sınır arasındaki alanı temsil eder. Padding, içerik ile öğe sınırı arasına eklenen boşluk veya iç boşluktur.

3. Sınır (Border):

   • İçeriği dolaylı içeriğinden ayıran sınırdır. Genellikle çizgi veya diğer grafiksel elemanlarla temsil edilir.

4. Dış Boşluk (Margin):

   • Öğenin dışındaki alanı temsil eder. Margin, öğenin diğer öğelerden uzaklaşmasını sağlar.

CSS kutu modeli, bir öğenin genişliğini ve yüksekliğini belirlerken bu dört bileşeni göz önünde bulundurur. Toplam genişlik veya yükseklik, içerik, dolaylı içerik, sınır ve dış boşlukların toplamıdır. Bu model, öğelerin birbirine nasıl yerleştirildiğini ve görüntülendiğini kontrol etmek için kullanılır.

Aşağıda, bir öğenin kutu modelinin CSS ile nasıl belirlenebileceğine dair basit bir örnek bulunmaktadır:

div {
  width: 200px;       /* Genişlik (Content + Padding + Border) */
  padding: 20px;      /* Dolaylı İçerik (Padding) */
  border: 2px solid black;  /* Sınır (Border) */
  margin: 10px;       /* Dış Boşluk (Margin) */
}

Bu örnek, bir <div> öğesinin genişliğini, dolaylı içeriğini, sınırını ve dış boşluğunu belirler.