Yükleniyor...

CSS Kutu Modeli

Border, padding, margin ve width’i zaten biliyorsunuz. Şimdi hepsini tek bir haritada toplayın. CSS kutu modeli der ki: her öğe iç içe katmanlardan oluşur — ortada content, sonra padding, sonra border, en dışta margin.

Dört katman

Kutuyu içeriden dışarıya okuyun.

📊 Kutu modeli katmanları

Katman Nerede durur Günlük işi
Content Merkez Metin, görseller ve çocuklar burada yaşar; width / height genelde bunu ölçer
Padding Content ile border arasında İç yastık; arka plan genelde bunu doldurur
Border Padding’in çevresinde Kutunun çizilmiş kenarı
Margin Border’ın dışında Bu kutuyu komşulardan ayıran dış boşluk

Önce yalnızca content boyutu

Padding ve border olmadan sade bir genişlik hikâyeyi net tutar.

Yalnızca content genişliği

css
CSS Code 
.box-content {
width: 200px;
background-color: #ccfbf1;
}

Padding ekleyin — boyalı alan büyür

Padding border’ın içinde durur. Varsayılan content-box modelinde padding, content genişliğinin dışına eklenir; boyalı kutu genişler.

Content artı padding

css
CSS Code 
.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* Content 200px kalır; padding her yana 20px ekler */

Border ekleyin — bir halka daha

Border padding’i sarar. Varsayılan boyutlandırmada border kalınlığı da border kutusunun dış boyutuna eklenir.

Content, padding ve border

css
CSS Code 
.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

Dört katmanı birleştirin

Margin arka planı boyamaz; yalnızca komşuları uzaklaştırır.

Tam kutu modeli tarifi

css
CSS Code 
.card {
width: 200px;          /* content */
padding: 16px;         /* iç yastık */
border: 2px solid #134e4a; /* kenar */
margin: 24px;          /* dış boşluk */
background-color: #ecfdf5;
}

Aynı genişlik, farklı toplam boyut

İki kutu width: 200px paylaşabilir ama padding ve border tarife girince çok farklı hissedilir.

Sade ile padded karşılaştır

css
CSS Code 
.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* İkisi de width 200px der; .padded daha çok yatay yer kaplar */

Akılda tutulası varsayılan kural

Varsayılan olarak (box-sizing: content-box), width ve height content kutusunu tanımlar. Padding ve border çoğu zaman son görünen kutuyu büyütür. Sonraki bir ders box-sizing: border-box ile bu hesabı değiştirir.

Kendiniz deneyin

  1. Yalnızca width: 200px ve arka planla .box-content kurun.
  2. Kopyalayın, padding: 20px ekleyin ve boyalı alanın büyüdüğünü görün.
  3. Kalın bir border ekleyip toplam boyutu yine izleyin.
  4. margin: 24px koyun; komşular uzaklaşır, arka plan o boşluğu doldurmaz.
  5. .bare ile .padded’i yan yana koyun — aynı ilan edilen genişlik, farklı iz.

Sık hatalar

  • Margin’in arka plan dolgusunun parçası olduğunu sanmak (dışarıdadır ve genelde şeffaftır)
  • width: 200px yazıp ağır padding’den sonra border kutusunun tam 200px kalmasını beklemek (content-box ile değil)
  • Katman sırasını karıştırmak (content → padding → border → margin)
  • Outline ile border’ı karıştırmak (farklı araç)
  • Varsayılan modeli anlamadan border-box alışkanlığına atlamak

Özet

  • Her öğenin content, padding, border ve margin katmanları vardır
  • Padding border’ın içindedir; margin dışındadır
  • Varsayılan width/height content kutusunu ölçer
  • Padding ve border çoğu zaman toplam görünen boyutu artırır
  • Margin dış ayrım yaratır, dolguyu boyamaz
  • box-sizing (sonraki uzman ders) genişlik hesabını değiştirebilir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders