CSS KUTU(BOX) MODELİ

Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan "<div>" etiketi, kutu modeli (box model) oluşturulurken de esas etiket konumundadır.

Div etiketleri sayesinde, istediğimiz kutu modellerini gerçekleştirebiliyoruz. Ayrıca istediğimiz öğenin etrafını istediğimiz biçimde sarabiliyoruz. Bu kutuların kendi içlerinde ve kendi aralarında ki düzenini stil şablonları uygulayarak ayarlayabiliyoruz.

Kutu modeli dört ana öğeden oluşur.

• margin: kenar dışı boşluğu
• border: kenar kalınlığı
• Padding: kenar içi boşluğu
• içerik:( Bizim tarafımızdan belirtilen metinler, görseller vs. yer alır.)

Aşağıda ki resimde kutu modeli (box-model) görsel olarak gösterilmiştir.

CSS Genişlik ve Yükseklik Özelliği - Width & Height of an Element

" width " ve " height " ile sadece içeriğin boyutlarını belirlersiniz. Toplam boyut için padding, border ve margin'i de hesaba katmanız gerekir.

Toplam boyutu 300px (piksel) olan bir örneği görelim.

CSS:

.kutu {width: 250px;
       padding: 10px;
       border: 5px solid gray;
       margin: 10px;

Genişliği Hesaplayalım...

250px Width(genişlik)

+ 20px (Sağdan ve Soldan verilen padding'lerden (İç Kenar Boşluğundan) geliyor.)

+ 10px (Sağdan ve Soldan verilen border'dan (Kenar Kalınlığından) geliyor.)

+ 20px (Sağdan ve Soldan verilen margin'lerden (Dış Kenar Boşluğundan) geliyor.)

= 300px

Sadece 250px alanı olduğunu varsayalım. Eni 250px toplam genişliği ile bir öğe yapalım:

CSS:

.kutu{width: 220px;
      padding: 10px;
      border: 5px solid gray;
      margin: 0px;

Bir elemanın toplam genişliği hep böyle hesaplanmalıdır;

Toplam eleman genişliği = width + sağ padding + sol padding + sağ border + sol border + sağ margin + sol margin .

Bir elemanın toplam yüksekliği hep böyle hesaplanmalıdır;

Toplam eleman yüksekliği = height + üst padding + alt padding + üst border + alt border + üst margin + alt margin .

ÖRNEK KUTU:

CSS:

.kutu{width: 220px;
      height:200px;
      border: 5px solid #000;
      background-color:#ff6600;

HTML:

<div class="kutu"> </div>

ÇIKTI: