CSS’te padding ve margin arasındaki fark genelde tam olarak bilinmez. Bu iki benzer kodun arasındaki fark aslında çok basittir.

• Padding kullanırsanız html etiketinin kenarlarından içeriye doğru bir kaydırma olur.
• Margin kullanırsanız html etiketinin kenarlarından dışarıya doğru bir kaydırma olur. Kullandığımız etiket belirlediğimiz ölçülerde kayar (yer değiştirir).

Aşağıdaki genişlik ve yükseklikleri aynı iki kutudan birincisinde padding ikincisinde margin kodu kullanılarak kaydırma yapılmıştır.

Resimde görülen kutular 100px*100px boyutlarındaydılar. İlk kutuya padding: 20px; değerini verdiğimizde, yazıdan dışarıya doğru her kenardan 20px arttığı için, kutunun boyutları 140px*140px oldu. İkinci kutuya margin: 20px; değerini verdiğimizde ise kutu dört kenardan da 20px uzunluğunda uzaklaştı.

*Etiketin içerisindeki yazıyı kenarlardan uzaklaştırmak istiyorsak padding kullanmalıyız. Eğer etiketi kenarlıkları ile birlikte komple kaydırmak istiyorsak margin kullanmalıyız.

Kullanım şekilleri

1.

padding: 10px;
margin: 10px;

Bu tip kullanımda verdiğiniz değer sağ, sol, üst ve alt kenarların hepsine etki edecektir.
2.

padding: 10px 12px;
margin: 10px 12px;

Bu tip kullanımda verdiğiniz ilk değer (10px) üst ve alt kenarlara, ikinci değer (12px) ise sağ ve sol kenarlara etki edecektir.
3.

padding: 10px 12px 6px 4px;
margin: 10px 12px 6px 4px;

Bu tip kullanımda verdiğiniz ilk değer (10px) üst kenara, ikinci değer (12px) sağ kenara, üçüncü değer (6px) alt kenara ve dördüncü değer (4px) sol kenara etki edecektir.

Dilerseniz hepsini bir satırda halletmek yerine ayrı ayrı da yapabilirsiniz.

padding-top: 10px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 4px;
margin-top: 10px;
margin-right: 12px;
margin-bottom: 6px;
margin-left: 4px;

top: üst, right: sağ, bottom: alt, left: sol kenarı belirtir.

Negatif padding ve margin

padding: -10px;
margin: -10px;

Eğer padding veya margini üstteki gibi kullanırsanız kenarlara tersi yönde etki eder. Örneğin margin-bottom: -10px yazdığınızda, kodu kullandığınız alan alttan 10px yukarı doğru çıkar.