margin kodu nasıl kullanılır etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
margin kodu nasıl kullanılır etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

25 Ağustos 2012 Cumartesi

CSS Margin Kodu

CSS Margin Kodunun Özellikleri

CSS'nin margin kodu ile web sayfasına eklenen elemanın çevresi ile olan dış boşlukları belirlenir. Margin özelliğini kullanarak bir elemanı yerleştirirken üstten alttan sağdan ve soldan ne kadar boşluk bırakmak istediğinizi belirtirsiniz.Margin değerleri yüzde ve piksel gibi web tasarımda kullanılan diğer ölçü birimleri kullanılabilir.  Margin değerlerini negatif olarak verebilirsiniz. Margin kodu tüm tarayıcılar tarafından desteklenmektedir.

Margin kodu nasıl kullanılır?


Margin kodu çeşitli şekillerde yazılabilir. Örnek olarak id'si deneme olan bir div elemanımız olsun. Bu elemana margin değerleri vermek istersek,

#deneme{
   margin-top:5px;           /Elemana üstten 5px boşlk verir./
   margin-left:10px:        /Elemana  soldan 10px boşluk verir./
   margin-right:20px;      /Elemana sağdan 20px boşluk verir./
   margin-bottom:30px;  /Elemana alttan 30px boşluk verir./
}

Margin kodu kısa olarak şu şekilde de kullanılabilir,

#deneme{
   margin: 5px 20px 30px 10px;   /Bu kodlama da aynı sonucu verecektir./
}


Burada margin değerlerinin sıralaması şöyledir;
margin: ust boşluk sağ boşluk alt boşluk sol boşluk
Eğer her yerden eşit boşluk vercekseniz kodlama şu şekilde olmalıdır,

#deneme{
   margin: 10px   /Bu kodlama ile deneme elemanı her yönden 10px boşluk alacaktır./
}

Eğer üstten ve alttan 10px, soldan ve sağdan 20px boşluk bırakmak isterseniz margin kodlamasının kısa yazılış biçimi şu şekilde olacaktır,
#deneme{
   margin: 10px  20px;   /Üstten ve alttan 10px, soldan ve sağdan 20px./
}

Bu yazdığımız kodlama,
#deneme{
   margin: 10px 20px 10px 20px; 
}

yazımının kısaltılmış şeklidir.


Turgut Arslan