Kutu Modeli

Margin, border, padding ve content alanları.

Kutu modeli, bir öğenin dış ve iç boşluklarını kontrol eder. Aşağıdaki şema gösterir:

Content – Metnin kendisi.
Padding – İç kenar boşluğu.
Border – Çerçeve.
Margin – Dış kenar boşluğu.

Kutu Modeli Görselleştirme

.box {
    width: 200px;
    padding: 10px;   /* iç boşluk */
    border: 2px solid #333; /* çerçeve */
    margin: 20px;   /* dış boşluk */
    background: #f0f0f0;
}