CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS 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)


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.

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

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 10x2)
  • 10 piksel = Sağ ve Sol Kenarlıklar (border 5x2)
  • 20 piksel = Sağ ve Sol Dış Boşluk (margin 10x2)
  • 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.

Şimdi dış boşluğu 20 piksel, iç boşluğu 5 piksel, kenarlığı 3 piksel ve genişliği 300 piksel olan bir kutu oluşturalım:

CSS Kodumuz:

   .kutum {

      /* Dış boşluk */
      margin: 20px;

      /* Kenarlık */
      border: 3px black solid;

      /* İç boşluk */
      padding: 5px;

      /* Genişlik */
      width: 300px;

   }
   

Şimdi bu tablomuzun nasıl göründüğüne bakalım:

Vazgeç gönlüm sen bu aşktan!
Sana kıymet veren mi var?

Yukarıdaki kutumuzun toplam genişliği (20x2)+(3x2)+(5x2)+300 = 356 dır.

Tarayıcı Uyumluluğu

Bazı eski tarayıcılar sitenizi hazırladığınızdan farklı gösterebilir. Bu sorunla karşılaşma nedeniniz sayfanızın başında DOCTYPE kullanmamanız olabilir. Bu nedenle uyumluluk için aşağıdaki kodu mutlaka sayfa kodlarınızın başında kullanın.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014