Sitemizin layoutlarını hazırlarken sıklıkla kullandığımız margin ve padding seçicilerinin en kısa şekilde nasıl kullanılabileceğinden bahsedeceğim.

Öncelikle margin ve padding hiç kullanmamış olanlar için ne olduklarını kısaca belirtelim; 
margin, birlikte kullandığımız elementin borderından(çerçevesinden),diğer elementleri uzaklaştırmak istediğimizde kullanırız.
padding ise marginin tersi olup, borderın iç kısmında mesafe bırakmak için kullanılır.

Padding ile kullanım farkı olmadığından, margin üzerinden açıklamaları yapacağım..

margin-bottom : aşağıdan ne kadar boşluk bırakacağını belirler. px cinsinden değer alır.
margin-top : borderın üstünden ne kadar boşluk bırakacağını belirler. px cinsinden değer alır.
margin-left : soldan ne kadar boşluk bırakacağını belirler. px cinsinden değer alır.
margin-right : sağdan ne kadar boşluk bırakacağını belirler. px cinsinden değer alır.

.div_deneme{
margin-bottom:5px;
margin-top:5px;
margin-left:5px;
margin-right:5px;
}

şeklinde div_deneme classı için margin değerleri atanabilinir fakat tüm margin değerleri 5px olduğundan aşağıdaki gibi bunu tek seferde de verebiliriz :

.div_deneme{margin:5px}

Bu şekilde kısaltmalar kullanarak css dosyamızın daha az kb olmasını sağlamış oluyoruz (yani sayfamızın daha hızlı yüklenmesini sağlamış oluyoruz.)

4 farklı şekilde margin değerleri tek satırda atanabilinmektedir. Bunun için alttaki resmi hazırladım, çoğu zaman aldığı parametrelerin yerlerini karıştırdığımdan margin veya padding kullanırken bakıyorum..
 


Her hafta css ile ilgili en az 1 makale yazmaya karar verdim, diğer makale de yakında geliyor..