CSS’te kutu neden taşar? Width, padding ve border-box

Bir karta 300 piksel genişlik verdiğin halde yan yana sığmıyorsa yalnızca width değerine bakmak yetmez. İç boşluk, kenarlık ve dış boşluk birlikte yer kaplar. Kutu modelini öğrendiğinde rastgele değerler deneyerek tasarım düzeltmek yerine ölçerek ilerleyebilirsin.

Önce neyi çözmek istediğini belirle

Kartın gerçek genişliğini hesaplamayı ve dar ekrana uyumlu bir kutu kurmayı öğreneceğiz. Sabit bir genişlik yerine yüzde genişlik ile üst sınırı birlikte kullanacağız.

Adım adım uygula

1 Kutunun katmanlarını ayır. İçerikten dışarı doğru content, padding, border ve margin gelir. Padding kutunun arka planını taşır; margin kutunun dışındadır.
2 Ölçüm kuralını seç. border-box kullanırsan belirtilen genişliğe iç boşluk ve kenarlık dahil olur. Margin yine bu genişliğin dışındadır.
3 Tarayıcıda ölç. Inspect bölümündeki kutu modeli görünümünü aç. Her kenarda hangi boşluğun oluştuğunu incele; tek tek değer değiştir.

Küçük bir örnek

CSS

* { box-sizing: border-box; }
.kart {
  width: 100%;
  max-width: 320px;
  padding: 24px;
  border: 1px solid #ddd;
}

Sık takılınan nokta

overflow:hidden eklemek taşmanın asıl sebebini düzeltmeyebilir; yalnızca içeriği keser. Önce öğenin minimum genişliğini, uzun kelimeleri ve çocuğun sabit ölçüsünü kontrol et. Flex ve Grid çocuklarında min-width:0 gerekebilir.

Şimdi kendin dene

Bir karta 24px padding ve 1px border ekle. border-box kuralını açıp kapatarak tarayıcının hesapladığı genişliği karşılaştır; sonra ekranı 320 piksele daralt.

Bir sonraki adım CSS’te kutu modeli ve mobil yerleşim dersleri →

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

CSS’te kutu neden taşar? Width, padding ve border-box konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.

Kaynak ve devamı

Resmi belgeleri aç ↗

Webino App denemesi: Kutunun genişliğini gerçekten ölçtük

Aynı 200px genişlik, 20px iç boşluk ve 3px kenarlıkla iki kutu ölçüldü. Dış boşluk bu ölçüme dahil değildir. border-box dar ekrana tek başına çözüm değildir; içerik ve minimum genişlikler de kontrol edilir.