CSS padding ve margin özellikleri

Özellikle css ile yeni tanışan arkadaşların sıkıntısı padding ve margin özellikleridir. Aslında bu iki özellikte sayfa elementinin (div,span,img v.b.) yerleşimini belirtmek için kullanılır.Yani bir elementin sağ,sol,üst ve alt kısımdaki elementlere göre pozisyonunu belirler.
Padding: İçeriğin elementin sınırlarına olan uzaklığını belirlemek için kullanılır.Örneğin "padding:4px;" şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler.
Margin: Elementin komşu elementlere olan uzaklığını belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki bir deklerasyon elementin komşularının sınırlarına (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Aşağıdaki şekilde padding ve margin seçeneğini gösterir.


Yandaki şekilde bizim elementimiz mavi olan ise 1 numaralı boşluk margin (komşuya uzaklık) 2 numaralı boşluk ise paddaing(içeriğin elemente olan uzaklığı) dır.

Padding ve Margin 'in ne olduğunu öğrendikten sonra nasıl kullanıldıklarına bakalım.Her iki özelliğinde yazım kuralları aynıdır. Boşuk (margin veya padding) belirlerken üç şekilde tanımlanır.

1-Sadece bir yön verilerek tanımlama yapılabilir.Bunu öncelikle özellik adını yazıp yanına da yönü belirtiyoruz. Örneğin: padding-left:4px; veya margin-top:30px; gibi.
2-Özellik adı yazıldıktan sonra sırasıyla üst, sağ, alt, sol boşluklar verilir. Örneğin: margin:2px 4px 6px 8px; şeklindeki bir tanım elementin komşu elementlere göre üstten 2 sağdan 4 alttan 6 ve soldan da 8 pixel boşluk olacak şekilde hizalar.
3-Özellik adı yazılır ve yanına sadece bir tanımlama yapılır.Örneğin:padding:50px; şeklindeki bir tanımlama ile element içeriği dört taraftan da 50 pixel boşluk bırakılarak hizalar.

Umarım faydalı olur.

5 yorum:

  1. çok güzel anlatmıssınız sonunda anladım margın ve padding olayını:)

    YanıtlaSil
  2. teşekkürler. elinize sağlık

    YanıtlaSil
  3. çok teşekkürler ellerinize sağlık yararlı bir döküman oldu "en azından benim için"

    YanıtlaSil
  4. teşekkürler cok yararlandım.emegine saglık

    YanıtlaSil

Popüler Yayınlar