https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 2 Oy - Ortalama: 3
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Margin Padding ve Ölçü Birimleri
#1
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:

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.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler konu için.
Ara
Cevapla PGM
Teşekkür verenler:
#3
(12-04-2015 Saat: 15:17)#Dizz Nickli Kullanıcıdan Alıntı: Teşekkürler konu için.


Önemli değil.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping