Css Margin

Margin bir elementin kenarlarındaki boşlukları belirlememize yarayan css kodudur.

Zaten Türkçede de kenar boşluğu anlamına gelmektedir.Bunu size bir örnekle açıklayacak olursam benim sitemdeki logoya bakın görüyorsunuz üstünde,sağında,altında ve solunda belli boşluklar var işte o boşlukları margin kodu ile ayarlıyoruz.

Margin kodu dört şekilde kullanılıyor bunlar ;

• top // Üst boşluk

• righ // Sağ boşluk

• bottom // Alt boşluk

• left // Sol boşluk

Bunları tekil olarakta kullabiliyor olmamızın yanı sıra tek bir margin altında da hepsini kullanabiliyoruz.

Bunları tekil olarakta kullabiliyor olmamızın yanı sıra tek bir margin altında da hepsini kullanabiliyoruz.Her iki şekilde kullanmanızda bir sorun oluşturmayacaktır.Kullanım şekillerini aşağıda görebilirsiniz.

Tekil olarak kullanım : margin-bottom:3px; , margin-left:3px; , margin-top:3px; , margin-right:3px.

Tek bir margin altında kullanımı : margin:3px 3px 3px 3px;.

Gelin bir örnekle daha iyi anlayalım nasıl kullanıldığını ve ne işe yaradığını.

Html Kodları :

<div class="kutu">kutu</div>
<div class="marginvekutu">margin ve kutu</div>
<div class="kutu">kutu</div>

Css Kodları :

body{
    background:#ddd;
}    
.kutu{
 background-color:#FFFFFF;
 width:200px;
 font:bold 22px/100px Tahoma;
 text-align:center;
}
.marginvekutu{
 background-color:#1E569A;
 width:200px;
 font:bold 22px/100px Tahoma;
 text-align:center;
 margin:20px 20px 20px 50px;
}

Uygulamalı Örnek :

Örnekte görüldüğü üzere ortadaki kutuya margin verildi ve üstten 20px sağdan 20px alttan 20px ve soldan 50px boşluk oluştu.Umarım anlamışsınızdır önemli bir css kodudur kolay gelsin.