Kutu Modelini Oluşturan Dört Özellik Nedir?

CSS’de kutu modeli (box model), her HTML öğesinin çevresindeki alanı tanımlamak için kullanılan bir yapıdır. Bu model, öğelerin nasıl göründüğünü ve diğer öğelerle nasıl etkileşimde bulunduğunu belirler. Kutu modeli, öğelerin genişliği, yüksekliği ve yerleşimi üzerinde büyük bir etkiye sahiptir. Kutu modelini oluşturan dört temel özellik şunlardır:

1. Content (İçerik)

İçerik, öğenin aslında içerdiği verinin (metin, resim vb.) bulunduğu bölümdür. Bu, öğenin asıl “çekirdek” kısmıdır ve genişlik ile yükseklik değerleri bu alanda belirlenir.

Örnek:

Bu durumda, 200px genişlik ve 100px yükseklik değeri content kısmına uygulanacaktır.

2. Padding (İç Boşluk)

Padding, içerik ile öğenin kenarları arasındaki boşluktur. Bu alan, öğenin iç kısmındaki her bir kenara eklenir ve içerik ile sınırlar arasındaki mesafeyi belirler. Padding değeri arttıkça, içerik alanı küçülür.

Örnek:

Burada, içerikten dışarıya doğru her kenara 20px boşluk eklenmiş olur.

3. Border (Sınır)

Border, öğenin içerik ve padding bölümlerinin çevresinde yer alan çizgidir. Sınır, öğenin etrafını saran kenar çizgisi olup, genişlik, stil ve renk gibi özelliklerle özelleştirilebilir.

Örnek:

Bu örnekte, öğenin etrafında 5px genişliğinde, siyah renkli bir sınır çizilmiştir.

4. Margin (Dış Boşluk)

Margin, öğenin dışındaki boşluktur. Diğer öğelerle arasındaki mesafeyi belirler. Margin, öğe ile çevresindeki öğeler arasında alan bırakmak için kullanılır ve negatif değerler de alabilir.

Örnek:

Bu durumda, öğenin etrafında 30px dış boşluk eklenmiş olur, yani öğe ile çevresindeki öğeler arasında 30px mesafe oluşur.

Kutu Modelinin Genel Yapısı

Kutu modeli, genellikle şu sırayla çalışır:

1. Content (İçerik) – Öğenin asıl içerik alanı.
2. Padding (İç Boşluk) – İçeriğin etrafındaki boşluk.
3. Border (Sınır) – İçerik ve padding arasındaki çizgi.
4. Margin (Dış Boşluk) – Öğenin dışındaki boşluk.

Bu dört özellik, öğelerin boyutlarını ve yerleşimini etkileyerek sayfa tasarımında önemli bir rol oynar.