C
Bölüm 3: Kutu Modeli (Box Model) ve Layout Temelleri
Genel Bakış

Bölüm 3: Kutu Modeli (Box Model) ve Layout Temelleri

furkanczay furkanczay
15 Haziran 2025
6 dk okuma süresi
css box-model layout margin padding
kutu-modeli-layout-temelleri

CSS Kutu Modeli Nedir?

CSS’te her HTML öğesi dikdörtgen bir kutu olarak kabul edilir. Kutu Modeli (Box Model), bu kutunun nasıl oluştuğunu ve boyutlarının nasıl hesaplandığını açıklayan temel kavramdır.

Kutu Modelinin Bileşenleri

Her CSS kutusu dört ana bölümden oluşur:

┌─────────────────────────────────────┐
│             MARGIN                  │
│  ┌───────────────────────────────┐  │
│  │          BORDER               │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │        PADDING          │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  │                   │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

1. Content (İçerik)

Öğenin gerçek içeriğinin bulunduğu alan:

.box {
    width: 200px;     /* İçerik genişliği */
    height: 100px;    /* İçerik yüksekliği */
}

2. Padding (İç Boşluk)

İçerik ile kenarlık arasındaki boşluk:

.box {
    padding: 20px;                    /* Tüm yönlerde 20px */
    padding: 10px 20px;              /* Dikey 10px, yatay 20px */
    padding: 10px 15px 20px 25px;    /* Üst, sağ, alt, sol */
    
    /* Ayrı ayrı belirleme */
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

3. Border (Kenarlık)

Öğenin çevresindeki kenarlık:

.box {
    border: 2px solid #333;          /* Genişlik stil renk */
    border-width: 2px;               /* Kenarlık genişliği */
    border-style: solid;             /* Kenarlık stili */
    border-color: #333;              /* Kenarlık rengi */
    
    /* Yön bazlı kenarlıklar */
    border-top: 3px solid red;
    border-right: 1px dashed blue;
    border-bottom: 2px dotted green;
    border-left: 4px double purple;
}

Border Stilleri

.solid { border-style: solid; }      /* Düz çizgi */
.dashed { border-style: dashed; }    /* Kesikli çizgi */
.dotted { border-style: dotted; }    /* Noktalı çizgi */
.double { border-style: double; }    /* Çift çizgi */
.groove { border-style: groove; }    /* Oyuk efekti */
.ridge { border-style: ridge; }      /* Çıkıntı efekti */
.inset { border-style: inset; }      /* İçeri çökük */
.outset { border-style: outset; }    /* Dışarı çıkık */
.none { border-style: none; }        /* Kenarlık yok */

4. Margin (Dış Boşluk)

Öğenin dış çevresindeki boşluk:

.box {
    margin: 20px;                    /* Tüm yönlerde 20px */
    margin: 10px 20px;              /* Dikey 10px, yatay 20px */
    margin: 10px 15px 20px 25px;    /* Üst, sağ, alt, sol */
    
    /* Ayrı ayrı belirleme */
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
    
    /* Otomatik ortalama */
    margin: 0 auto;                 /* Yatay ortalama */
}

Box-Sizing Özelliği

CSS’te boyut hesaplama şeklini değiştirir:

Content-Box (Varsayılan)

.content-box {
    box-sizing: content-box;  /* Varsayılan */
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Toplam genişlik: 200 + 40 + 10 = 250px */
}

Border-Box (Önerilen)

.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Toplam genişlik: 200px (padding ve border dahil) */
}
Ipucu

En İyi Uygulama: Tüm öğeler için box-sizing: border-box kullanın. Bu, boyut hesaplamalarını daha öngörülebilir yapar.

Global Border-Box Ayarı

/* Tüm öğeler için border-box */
*, *::before, *::after {
    box-sizing: border-box;
}

Pratik Kutu Modeli Örnekleri

1. Basit Kart Tasarımı

.card {
    width: 300px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
 
.card-title {
    margin: 0 0 15px 0;
    font-size: 1.5em;
    color: #333;
}
 
.card-content {
    margin: 0;
    line-height: 1.6;
    color: #666;
}

HTML:

<div class="card">
    <h3 class="card-title">Kutu Modeli</h3>
    <p class="card-content">
        CSS kutu modeli, layout tasarımının temelidir.
    </p>
</div>

2. Düğme Tasarımları

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007acc;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    margin: 5px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s;
}
 
.btn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}
 
.btn-outline {
    background-color: transparent;
    color: #007acc;
    border: 2px solid #007acc;
}
 
.btn-outline:hover {
    background-color: #007acc;
    color: white;
}
 
.btn-large {
    padding: 16px 32px;
    font-size: 1.1em;
}
 
.btn-small {
    padding: 8px 16px;
    font-size: 0.9em;
}

3. Navigasyon Menüsü

.navbar {
    background-color: #333;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
 
.navbar li {
    margin: 0;
}
 
.navbar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    border-right: 1px solid #555;
    transition: background-color 0.2s;
}
 
.navbar a:hover {
    background-color: #555;
}
 
.navbar .active {
    background-color: #007acc;
}

Margin ve Padding İpuçları

Margin Collapse (Margin Çökermesi)

Dikey marginler bazen birleşir:

.element1 {
    margin-bottom: 20px;
}
 
.element2 {
    margin-top: 30px;
}
 
/* Aralarındaki boşluk 50px değil, 30px olur (büyük olan geçerli) */

Negatif Marginler

.overlap {
    margin-top: -20px;    /* Öğeyi yukarı kaydırır */
    margin-left: -10px;   /* Öğeyi sola kaydırır */
}
 
.pull-left {
    margin-right: -100px; /* Sağdaki öğeyi üzerine çeker */
}

Responsive Padding ve Margin

.responsive-box {
    padding: 5%;           /* Ekran boyutuna göre değişir */
    margin: 2em 0;         /* Em birimi ile */
}
 
.container {
    padding: 1rem 5%;      /* Farklı birimler */
    max-width: 1200px;
    margin: 0 auto;        /* Ortalama */
}

Pratik Layout Örnekleri

1. Centered Container

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
 
/* Responsive padding */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

2. Card Grid System

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
 
.card-item {
    flex: 1 1 300px;        /* Esnek boyutlandırma */
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 0;              /* Gap ile aralık veriliyor */
    box-sizing: border-box;
}

3. Sidebar Layout

.layout {
    display: flex;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}
 
.sidebar {
    flex: 0 0 250px;        /* Sabit genişlik */
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}
 
.main-content {
    flex: 1;                /* Kalan alanı kapla */
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}

Debugging Kutu Modeli

Geliştirme sırasında kutu modelini görselleştirmek için:

/* Geçici debugging */
* {
    outline: 1px solid red;
}
 
/* Veya sadece belirli öğeler için */
.debug {
    outline: 1px solid red;
    background-color: rgba(255, 0, 0, 0.1);
}
 
/* Border-box kontrolü */
.box-debug {
    box-sizing: border-box;
    border: 2px dashed blue;
    background-color: rgba(0, 0, 255, 0.1);
}
Ipucu

DevTools Kullanın: Browser geliştirici araçlarında öğeye sağ tıklayıp “Inspect” ile kutu modelini görsel olarak inceleyebilirsiniz.

Yaygın Kutu Modeli Sorunları

1. Unexpected Width

/* ❌ Problem */
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid black;
    /* Toplam genişlik %100'den fazla olur */
}
 
/* ✅ Çözüm */
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

2. Margin Collapse

/* ❌ Problem: Beklenmeyen boşluk */
.card {
    margin: 20px 0;
}
 
.card h3 {
    margin: 20px 0;
}
 
/* ✅ Çözüm: Padding kullanma */
.card {
    margin: 20px 0;
    padding-top: 1px;  /* Margin collapse'i engeller */
}

Pratik Egzersiz

  1. Farklı box-sizing değerlerini test edin
  2. Margin ve padding kombinasyonları deneyin
  3. Card layout oluşturun
  4. Responsive container tasarlayın

En İyi Uygulamalar

  1. Hep border-box kullanın
  2. Consistent spacing sistemi oluşturun
  3. Margin collapse’a dikkat edin
  4. DevTools’u debugging için kullanın

Sıradaki Bölüm

Bir sonraki bölümde Flexbox Layout öğreneceksiniz. Modern web tasarımının vazgeçilmez aracı olan Flexbox ile kompleks layoutları kolayca oluşturacaksınız.

Öğrendikleriniz:

  • ✅ Kutu modelinin dört bileşenini
  • ✅ Box-sizing özelliğini
  • ✅ Margin ve padding kullanımını
  • ✅ Border stillerini
  • ✅ Pratik layout örneklerini

Kutu modeli CSS’in temelidir! Bu bilgiyi iyi kavradığınızda layout tasarımında çok daha başarılı olacaksınız! 📦