Ders 10 – Box Model: margin, padding, border

Bu derste CSS’in en temel konularından biri olan Box Model yapısını öğreneceksin. Tüm HTML elemanlarının birer “kutu” olduğunu ve bu kutunun iç boşluk (padding), çerçeve (border) ve dış boşluk (margin) gibi bölümlerden oluştuğunu keşfedeceksin.

1. Neleri Öğreneceksin?

Box Model kavramını ve kutunun katmanlarını,
padding ile iç boşluk eklemeyi,
border ile çerçeve çizmeyi,
margin ile elemanlar arasında mesafe bırakmayı,
Basit bir “kart” tasarımı üzerinde box model mantığını uygulamayı öğreneceksin.

2. Box Model Nedir?

Her HTML elemanını aşağıdaki gibi düşünebilirsin:

Content: Metnin, resmin veya içeriğin olduğu kısım.
Padding: İçerik ile çerçeve arasındaki iç boşluk.
Border: Kutuyu çevreleyen çizgi (çerçeve).
Margin: Kutunun dışındaki boşluk (diğer kutulardan uzaklığı).

/* Basit bir kutu örneği */
.kutu {
  background-color: #22f2a2;
  padding: 16px;
  border: 2px solid #ffffff;
  margin: 16px;
}

Bu örnekte kutunun içeriği ile kenarı arasında 16px boşluk (padding), dışında ise diğer elemanlara 16px mesafe (margin) vardır.

3. Padding: İç Boşluk

padding, içerik ile border arasına boşluk ekler. Metin duvara yapışık durmasın diye genelde kutulara padding verilir.

.kart {
  background-color: #0f172a;
  color: #e5e7eb;
  padding: 20px;
}

Bu bir kart örneğidir. İçerikle kenar arasında boşluk olduğu için metin daha rahat okunur.

Padding’i dört kenar için ayrı ayrı da verebilirsin:

.kutu {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

4. Margin: Dış Boşluk

margin, kutunun dışındaki boşluğu kontrol eder. Yani kutunun diğer kutulara olan mesafesini belirler.

.kart {
  margin-top: 24px;
  margin-bottom: 24px;
}

Birinci kutu

İkinci kutu (iki kutu arasında margin var)

Eğer tüm kenarlara aynı margin değeri vereceksen kısaca:

.kart {
  margin: 24px;
}

5. Border: Çerçeve ve Border-radius

border ile kutunun etrafına çizgi ekleyebilirsin. Kalınlığını, stilini ve rengini ayarlayabilirsin:

.kart {
  border: 2px solid #22f2a2;   /* kalınlık, stil, renk */
  border-radius: 12px;         /* köşeleri yuvarlatır */
}

Border ve border-radius uygulanmış bir kart örneği.

6. Mini Görev – Kutu Tasarımı ile Oynayalım

Şimdi box model bilgisini kullanarak kendi kart tasarımını yapacaksın:

Proje klasöründe box-model-oyun.html adında yeni bir dosya oluştur.
Sayfaya bir <div class="kart"> ekle ve içine bir başlık + paragraf yaz.
.kart sınıfına arka plan rengi, padding ve border ekle.
Kartın altına ikinci bir kart koy ve aralarına margin ile mesafe bırak.
İstersen border-radius ile köşeleri yuvarla.
Değerleri değiştirerek (padding, margin, border) kutunun nasıl değiştiğini gözlemle.

Yaptığın tasarımın ekran görüntüsünü alıp öğretmeninle paylaşabilirsin. Bir sonraki adımda flexbox ile bu kartları yan yana yerleştirmeyi öğreneceksin. 🙂

Ders 10 Görev / Quiz Linki

Kaynaklar

MDN – “Box Model” dokümanları
Yeşil Bilişim: HTML & CSS önceki ders notların