margin, padding, border, width ve box-sizing ile kutu modeli.
CSS'te her element bir kutu içinde yaşar. Bu kutu 4 katmandan oluşur: content (içerik), padding (iç boşluk), border (kenarlık), margin (dış boşluk).
Varsayılan değer content-box'ta width 300px verirseniz padding ve border eklenince gerçek genişlik daha büyük olur. border-box'ta padding ve border width'in içinde sayılır. Modern CSS'te hep border-box kullanılır.
Block elementleri yatayda ortalamak için margin: 0 auto kullanılır. Bunun çalışması için genişlik tanımlanmış olmalıdır.
/* Tüm elementlere border-box uygula (modern CSS standardı) */
*, *::before, *::after {
box-sizing: border-box;
}
.kutu {
/* Boyutlar */
width: 300px;
height: 200px;
min-width: 100px;
max-width: 100%;
/* İç boşluk (saat yönü: üst sağ alt sol) */
padding: 20px 16px 20px 16px;
padding: 20px 16px; /* üst-alt | sağ-sol */
padding: 20px; /* 4 taraf eşit */
/* Kenarlık */
border: 2px solid #6366f1;
border-radius: 12px;
border-top: 4px solid #6366f1; /* sadece üst */
/* Dış boşluk */
margin: 0 auto; /* yatayda ortala */
margin-top: 32px;
/* Arka plan */
background: #f8fafc;
/* Taşan içeriği gizle */
overflow: hidden;
overflow-x: auto; /* yatayda kaydır */
}
/* Görünmez margin sorunu çözümü */
.container { padding-top: 1px; } /* margin collapse önleme */