Merhaba,

CSS’de öğeler arası boşlukları ayarlamak için Margin ve Padding değerleri kullanılır.

Padding

Padding değeri, HTML öğesinin çerçevesi ve içeriği arasındaki boşluktur. Boşluğun değeri herhangi bir ölçü birimiyle gösterilebilir.

Örnek Kullanımı:

blockquote{ padding: 20px; }

Bu kullanımda çerçeve ile içerik arasındaki boşluk üstten, sağdan, alttan ve soldan 20px olacaktır. Ancak bu değerleri ayrı ayrı belirtmemiz de mümkün.

Örnek Kullanımı:

blockquote{ padding-bottom: 20px;}

Padding boşluğunu daha iyi anlayabilmemiz için çerçevemizi ekleyip bir arkaplan rengi tanımlayalım:

Padding Olmadan:

blockquote{ background: yellow; border: 1px solid blue; }

Görünümü:

Padding Kullanımı:

blockquote{ background: yellow; border: 1px solid blue; padding: 20px; }

Görünümü:

Margin

Padding değeri, HTML öğesinin içindeki, çerçeve ile içerik arasındaki boşluğu belirtiyordu. Margin değeri ise HTML öğesinin dışında bir boşluk oluşturmaya yarar. Öğenin diğer öğeler ile arasına belirli bir boşluk koymamızı sağlar.

Alt alta 3 tane paragraf oluşturalım:



  
<p>Bu bir paragraf.</p>
<p>Bu da başka bir paragraf.</p>
<p>Bu da bir başka üçüncü paragraf.</p>

Görünümü:

Bu paragraflar arasında varsayılan değerli bir boşluk bulunur. CSS ile margin kullanarak bu paragraf öğeleri arasındaki boşluğu düzenleyebiliriz.

p{ margin: 40px; }

Görünümü:

Margin boşluklarını üst, sağ, alt ve sol olmak üzere ayrı ayrı belirtebiliriz.

.title{ margin-bottom: 30px;}
.content{ margin-top: 15px;}

Bu kullanımda .title classını kullandığımız öğemiz alttan 30px, .content classını kullandığımız öğemiz de üstten 15px margin değerine sahip olacaktır.

Margin mi? Padding mi? Hangisini kullanmalıyım?

Bu bir çok kişi tarafından karıştırılan ve aslında cevabı da her zaman net olmayan bir sorudur. Cevabı verebilmemiz için asıl sormamız gereken, neden bir boşluğa ihtiyaç duyduğumuzdur. Kullandığımız alana göre hangisini tercih edeceğimize karar verebiliriz.

Eğer birbirinden ayıracağımız, aralarına boşluk koymak istediğimiz öğeler bir çerçeveye veya arkaplana sahip ise, margin veya padding kullanmamız sonucu değiştirecektir. Ancak hiç biri yoksa ve boşluk değerleri transparan değerde ise, hangisini kullanırsak kullanalım sonuç aynı görünecektir.

Neden bir boşluğa ihtiyaç duyduğunuz sorusuna cevabınız, öğe içeriğinizin görüntüsünde bir boş alan yaratmak ise padding kullanabilirsiniz. Cevabınız öğenizin kendisine bir boş alan yaratmak ise margin kullanabilirsiniz.