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..
