Margin ve Padding Kullanımı ve Farklılıkları

Margin ve paddin kullanım biçimi ve aralarındaki farklılıklar için ufak bir ders olacak.

Margin ve paddin kullanım biçimi ve aralarındaki farklılıklar için ufak bir ders olacak.

Derse başlarken bize gerekli olan CSS ve HTML dosyalarını temin ettikten sonra hemen HTML dosyasına:


<div id="kutu1">

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e    destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere   etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

</div>



<div id="kutu2">

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

</div>



Daha sonra stil.css dosyamıza:

CSS Kodu:


#kutu1{

    background-color:#F2D607;

        border:2px solid #666;

    width:300px;

}

#kutu2{

    background-color:#1DBDD6;

        border:2px solid #666;

    width:300px;

}



Bu şekilde bir şey çıkacaktır:



Aşağıdaki resimde ayrıntılı olarak margin padding ve border etkisi görülebiliyor.


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



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.



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.



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;



}





Şimdi bir şey daha ekleyelim: Bu sefer html kodlarımız arasına
Html Kodu:


<div id="kutu1">

<img src="resim.png">

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e    destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere   etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

</div>



<div id="kutu2">

<img src="resim1.png">

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

</div>



Resimlerimizi ekledik bakalım nasıl görünüyorlar:


Şimdi css kodlarımıza geçip şunları ekliyoruz.


#kutu1  img{

float:left;

padding:0 5px 5px 0;

}



Bu tanımlamanın aynısını kutu 2 için de yapıyoruz. Bununla resmi sola dayadık ve sağ ve alttan 5px'lik boşluklar verdik son görüntü aşağıdaki gibidir.



Umarıım bir şeyler anlatabildim :)) Selametle...
  • Etiketler;
Mehmet Ali Yılmaz
Web, tasarım, internet, teknoloji ve mucizelerini takip etmekten, kod yazmaktan, Firefox çevirilerine destek olmaktan mutluluk duyan asosyal/ist bir kişilik...
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

videolu hazırlasna böyle hiç birşey anlamıyoruz
Herhalde cümlen şöyle olacaktı: "videolu hazırlasan daha anlaşılır olur." + Okuyarak zaten bişey anlayamazsın ;) aç not defterini kodla padding margin girince neler değişiyor gör yine anlamıyorsan ricanı kırmayız videolu da anlatırız :)
Bence çok açıklayıcı olmuş. Bazen video fazla zaman kaybettiriyor. Okuduğunu anlayabilen birisi için yeterli ki görseller de fazlasıyla kullanılmış zaten. Teşekkürler.

Yukarı Git