Margin bir elemanın dış boşluğudur, padding ise bir elemanın çerçevesi içi boşluğudur ve devamında verilen değerler sırasıyla:
top (üst), right (sağ), bottom(alt), left(sol) yönündeki boşluklardır. Yani saat yönündedir.
Element olarak kendimize div'i alalım:
artık kullanacağımız div'ler sağdan soldan 20px dış boşluğa sahip olacak ancak iç boşluğu olmayacak. Yönlerde verilen birimler matrix çarpımı gibi düşünülebilir. Ve süslü parantez ile elemanın bloğu zaten kapatıldığı için son satırı noktalı virgül ile sonlandırmamız gereksizdir. Bu yüzden yıkarıdaki kodu şu şekilde kısaltabiliriz:
Sıfır bir değer olmadığı için yanında px,pt, % veya em cinsinden değer vermek de gereksizdir.
Peki bu ölçüler nelerdir:
px (piksel): Ekranın görüntüleyebildiği en küçük noktanın ölçüsüdür. Tasarımlarınızda esnememesi gerekli bölgelerde kullanmanızı tavsiye ederim.
pt (punto): Yazı karakteri ölçü cinsidir. Metin dışındaki elementler için de kullanılabilir ancak tavsiye etmediğim bir yöntemdir.
em (M yani alfabedeki en geniş karakterin ölçü birimidir.) Adından da anlaşılacağı gibi karakter boyutuna oranla ölçü vermeniz gereken yerlerde kullanabilirsiniz. Örnek:
Bu kod ile kullanacağınız bütün p yani paragraf elemanları bir buçuk satır aralığında olacak ve alttan üstten iki satır aralığı kadar dış boşluğa yani margin'e sahip olacaktır.
Ölçü birimi olarak yüzde de kullanabilirsiniz ancak ingilizce yazım kuralları dahilinde olmalıdır. Örnek:
Bu kod ile cerceve id'sini taşıyan bir div yarattığınızda ekranın yüzde yüzünü kaplayacaktır.
Bunlara ek olarak isterseniz tek satırda sadece belli bir yönün margin yada padding'ini verebilirsiniz
şeklinde de kullanabilirsiniz.
top (üst), right (sağ), bottom(alt), left(sol) yönündeki boşluklardır. Yani saat yönündedir.
Element olarak kendimize div'i alalım:
Kod:
div{
margin:10px 20px 10px 20px;
padding:0px 0px 0px 0px;
width:100px;
}artık kullanacağımız div'ler sağdan soldan 20px dış boşluğa sahip olacak ancak iç boşluğu olmayacak. Yönlerde verilen birimler matrix çarpımı gibi düşünülebilir. Ve süslü parantez ile elemanın bloğu zaten kapatıldığı için son satırı noktalı virgül ile sonlandırmamız gereksizdir. Bu yüzden yıkarıdaki kodu şu şekilde kısaltabiliriz:
Kod:
div{
margin:10px 20px;
padding:0;
width:100px
}Sıfır bir değer olmadığı için yanında px,pt, % veya em cinsinden değer vermek de gereksizdir.
Peki bu ölçüler nelerdir:
px (piksel): Ekranın görüntüleyebildiği en küçük noktanın ölçüsüdür. Tasarımlarınızda esnememesi gerekli bölgelerde kullanmanızı tavsiye ederim.
pt (punto): Yazı karakteri ölçü cinsidir. Metin dışındaki elementler için de kullanılabilir ancak tavsiye etmediğim bir yöntemdir.
em (M yani alfabedeki en geniş karakterin ölçü birimidir.) Adından da anlaşılacağı gibi karakter boyutuna oranla ölçü vermeniz gereken yerlerde kullanabilirsiniz. Örnek:
Kod:
p{
line-height:1.5em;
margin:2em 0;
}Bu kod ile kullanacağınız bütün p yani paragraf elemanları bir buçuk satır aralığında olacak ve alttan üstten iki satır aralığı kadar dış boşluğa yani margin'e sahip olacaktır.
Ölçü birimi olarak yüzde de kullanabilirsiniz ancak ingilizce yazım kuralları dahilinde olmalıdır. Örnek:
Kod:
div#cerceve
{
width:100%
}Bu kod ile cerceve id'sini taşıyan bir div yarattığınızda ekranın yüzde yüzünü kaplayacaktır.
Bunlara ek olarak isterseniz tek satırda sadece belli bir yönün margin yada padding'ini verebilirsiniz
Kod:
div
{
padding-top:15px;
padding-bottom:1.6em;
margin-right:10px;
margin-bottom:0
}şeklinde de kullanabilirsiniz.
