CSS’de Kutu Modeli

Bir HTML nesnesi kutu gibi davranabilir. İşte bu kutu şekilli tasarım modeline CSS Kutu Modeli diyoruz.

Kutu modelinde size tanıtacağımız dört özellik var:

  • Margin – Kenarlığın çevresinde verilen boşluk.
  • Border – Kenarlık
  • Padding – Kenarlık ile içerik arasındaki boşluk. Arkaplan rengine boyanır.
  • Content (İçerik)
Dıştan Boşluk (Margin)
Kenarlık (Border)
İçten Boşluk (Padding)
İçerik (Content)


Yukarıda CONTENT içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz boşluk padding, kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.

Bir Elementin Genişlik ve Yüksekliği

İçerik alanının genişliği width ve yüksekliği height özelliği ile ayarlanır.


Kutu Modeli

     margin: 10px;    /* Dış boşluk */
     border: 5px black solid;  /* Kenarlık */
     padding: 10px;    /* İç boşluk */
     width: 250px;    /* Genişlik */

Yukarıdaki örnekte genişlik (width) 250 piksel olarak ayarlanmıştır. Peki HTML dosyamızda da bu elementin kaplayacağı alan 250 piksel mi olacaktır? Tabiki HAYIR!

Şimdi hesaplayalım:

  • 250 piksel = Genişlik
  • 20 piksel = Sağdan ve Soldan İç Boşluk (padding 10×2)
  • 10 piksel = Sağ ve Sol Kenarlıklar (border 5×2)
  • 20 piksel = Sağ ve Sol Dış Boşluk (margin 10×2)
  • 300 piksel = Toplam Genişlik
Kısacası kodlama yaparken genişliği iyi hesap etmek için boşluk, kenarlık ve içerik genişliği toplanarak hesaplanmalıdır.
Yüksekliği hesap ederken width değeri yerine height değeri ve boşluk, kenarlıklar toplanarak hesap edilmelidir.