728x90 AdSpace

  • Latest News

    1/10/2012

    Margin ve Padding Arasındaki Fark ve Örnek Uygulama

    CSS öğrenmeye başlarken Class ve Div arasındaki fark kadar Margin ve paddin arasındaki fark da merak edilir. Aslında çok basit Margin nesneler arasındaki yerleşimi belirtirken padding nesnenin kendi içine doğru yaptığı girintiyi belirtir. kullanım biçimi ve aralarındaki farklılıklar için kodu devamına bakın...

    Aşağıda Gördüğünüz gibi iki kutumuz var.

    Aşağıdaki resimde ayrıntılı olarak margin padding ve border etkisi görülebiliyor.
    http://resim.sanalkurs.net/uploads/11s008z.jpg

    Bizim kodladığımız kutu ise şunun gibidir.

    http://resim.sanalkurs.net/uploads/adsz_475.jpg

    Sarı kısım en dış bölüm margin alanıdır.
    İçerideki mor alan padding'dir.
    Bu ikisi arasında kalan siyah ile belirttiğim ise border.

    Nesnemiz > padding > border > margin şeklinde bir dizilim vardır.

    Margin: En dış bölgededir ve transparent değere sahip. Yani renksiz saydamdır. Bu özellik ile nesneler arasındaki mesafeyi ayarlarız.
    Örnek:
    Oluşturduğumuz CSS dosyamızda:
    #kutu1{
     background-color:#F2D607;
         border:2px solid #666;
     width:300px;
     margin-bottom:10px;
    }
    Alttan 10px değerinde bir boşluk girdik. Ve yeni görüntü şöyle oldu.

    http://resim.sanalkurs.net/uploads/2_579.jpg

    Padding ise içeriğin içerisinde bulunduğu nesneye olan boşluğudur. Hemen örnek verelim.

    CSS Kodu:
     #kutu1{
     background-color:#F2D607;
         border:2px solid #666;
     width:300px;
           margin-bottom:10px;
     padding:10px;
    }
    #kutu2{
     background-color:#1DBDD6;
         border:2px solid #666;
     width:300px;
     padding:10px;
    
    }
    Aşağıda gördüğünüz gibi nesne kendi içerisine doğru 10px'lik bir boşluk verdi.

    http://resim.sanalkurs.net/uploads/3_495.jpg

    Margin, padding ve border tanımlamaları:

    Margin, padding ve border 4 yönde değer alabilir. Ve bu değerler tektek verilebilir yada hepsine tek tanımlama ile verilebilir.

    Yukarıda verilen resimde gösterilmiş karıştıranlar için:

    Margin/padding: Top Right Bottom Left; şeklindedir. Baş harflerinden bir şey uydurun hatırlamanıza yardımcı olacaktır. (ToRBaLı gibi :))Türkçe olarak üst sağ aşağı ve sol şeklindedir.

    Örneğin: Sadece aşağıya ve yukarıya border atalım:

    CSS Kodu:
    #kutu1{
     background-color:#F2D607;
         border-top:2px solid #666;
     border-bottom:2px solid #666;
     width:300px;
      margin-bottom:10px;
     padding:10px;
    }
    #kutu2{
     background-color:#1DBDD6;
         border-top:2px solid #666;
         border-bottom:2px solid #666;
     width:300px;
     padding:10px;
    
    }


    http://resim.sanalkurs.net/uploads/4_394.jpg

    Son olarak da sol üst köşeye resim ekleyelim.

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    0 yorum:

    Yorum Gönder

    Item Reviewed: Margin ve Padding Arasındaki Fark ve Örnek Uygulama Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top