CSS Margin Ve Padding Box Model Nedir Ve Kullanımı

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

Ü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

Padding özelliğine ait sözdizimleri ise şu şekildedir.

CSS

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

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.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın