Css’de margin ve padding özellikleri belkide en sık kullanılan özelliklerdendir bu özelliklerin kullanım yerleri ve kullanımı ile ilgili örneklere makalenin devamından ulaşabilirsiniz.
CSS Padding ve Margin Box Model Nedir ve Kullanımı
CSS Padding
Aşağıdaki örnek resim aslında margin ve padding’in nesne üzerinde yarattığı etkiyi kolayca göstermektedir.
Üstteki resimde sarı ile belirtilen alan ile iç boşluk oluşturulmuştur ve kırmızı ile belirtilen alan ise bir dış boşluktur
Şimdi padding ile bir iç boşluk oluşturalım ve sonucu görelim.
CSS
1 2 3 | div.xyz { padding: 10px 20px 30px 40px } |
Üstteki kodda padding’e ait en uzun sözdizimi kullanılmıştır değerler sırasıyla üst-sol-alt-sağ boşlukları ifade etmektedir en büyük boşluk sağ’da en küçük boşluk ise üstte yer almaktadır. alttada sonucu daha net görebilirsiniz.
Sonuç
Üstteki ilk padding örneğimizde tek satırda yazıp değerini verdik aşağıdaki gibi bir kullanım ile üstteki aynı sonuca ulaşabilirsiniz.
CSS
1 2 3 4 5 6 7 | div.xyz { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } |
Padding özelliğine ait sözdizimleri ise şu şekildedir.
CSS
1 2 3 4 | padding: 20px /*<tüm kısımlar>*/ padding: 20px 20px /*<üst/alt> <sol/sağ>*/ padding: 20px 20px 20px /*<üst> <sol/sağ> <alt>*/ padding: 20px 20px 20px 20px /*<üst> <sağ> <alt> <sol>*/ |
CSS Margin
Margin özelliği için sözdizimi padding özelliği ile aynıdır sadece isim değişmektedir ve sonucu farklıdır daha öncede bahsettiğimiz gibi padding iç boşluk oluştururken margin dış boşluk oluşturmaktadır. Şimdi margin için ufak bir örnek verelim.
CSS
1 2 3 | div.xyz { margin: 10px 20px 30px 40px } |
Sonuçdada görüldüğü gibi paddingden farkı açıkça gözükmektedir paddingde div nesnesine iç boşluk oluştururken margin özelliği ile div nesnesine dış boşluk oluşturulmaktadır.
