Kutu Modeli (Box Model)

Kutu Modeli (Box Model)

HTML'deki her eleman bir "kutu"dur. Bu kutu 4 katmandan oluşur:

/* Kutu Modeli:
   ┌─────────────── margin ───────────────┐
   │ ┌──────────── border ──────────────┐ │
   │ │ ┌────────── padding ──────────┐  │ │
   │ │ │                             │  │ │
   │ │ │         İÇERİK              │  │ │
   │ │ │                             │  │ │
   │ │ └─────────────────────────────┘  │ │
   │ └─────────────────────────────────┘ │
   └─────────────────────────────────────┘
*/

.kutu {
    width: 300px;
    height: 200px;
    padding: 20px;           /* İç boşluk */
    border: 2px solid #333;  /* Kenarlık */
    margin: 15px;            /* Dış boşluk */
    
    /* Tek satırda */
    padding: 10px 20px 10px 20px; /* üst sağ alt sol */
    margin: 0 auto;              /* Yatayda ortala */
}

/* box-sizing: Genişliğe padding ve border dahil */
* {
    box-sizing: border-box;  /* ÖNEMLİ! */
}

display Özelliği

/* Block: Yeni satırda, tam genişlik */
div, p, h1 { display: block; }

/* Inline: Aynı satırda, içerik kadar genişlik */
span, a, strong { display: inline; }

/* Inline-block: Aynı satırda ama genişlik/yükseklik verilebilir */
.buton { display: inline-block; padding: 10px 20px; }

/* None: Gizle (yer kaplamaz) */
.gizli { display: none; }