Margin Ozellikleri

Margin padding koduna benzetilir benzedikleri doğrudur ama işlevsel olarak birbirlerinden farklıdır "padding" eksi (-) değer alamazken margin eksi (-) değer alabilir ve padding kodu gibi itme kodu değildir boşlukları hesaplayıp hizalama yapabilir tabi bizim verdiğimiz değerde boşluk bırakabilir margin padding kodunun aksine kutunun yada bir elementin içinden değil dışından hesap yapar. Örneklerle margin kodunu nasıl işlediğini görelim
css 2.1 de bir elemente, kutuya veya sayfanın kendisinin 4 kısmına değer verebiliyoruz bunlar
margin-top
margin-right
margin-bottom
margin-left
sayısal değerlerlerin yanı sıra elementi, kutuyu veya sayfayı ortalamak için auto kullanılabilir

margin-top bir elemente, kutuya yada sayfanın kendisine üstten boşluk verebiliriz yada eksi (-) değer verebiliriz
Aynı şekilde diğer kısımlara boşluk verebilir yada hizalayabiliriz tek tek kullanmak yerine kısaltma kullanabiliriz örnek kullanım


Veya Her yön için aynı değerde boşluk verebiliriz örnek kullanım

Css 3 Margin Yenilikleri

Css 2.1 de sadece dört yöne değer verebilirken artık css 3 te bu sayı 16 ya çıktı şuan hiç bir tarayıcı desteklemesede css3 ü yakından takip etmeye devam ediyoruz her tarayıcının kat etmesi gereken daha çok yol var. Bu etki yönleri için bir resim çizdim Anlamamızı daha kolaylaştırması için
Üstteki resimdeki çizginin bir element, kutu yada sayfa olduğunu düşün noktalı alanlar ise bizim ayrı ayrı değer verebileceğimiz alanlar css3 gerçektende çok güzel bir şekilde ilerliyor. Resimde görülüldüğü gibi köşelere değer verebiliyoruz yönlerin isimleri ise şu şekilde
top-left-corner => Üst Sol Köşe
top-left => Üst Sol
top-center => Üst Orta
top-right => Üst Sağ
top-right-corner => Üst Sağ Köşe

left-top => Sol Üst
left-middle => Sol Orta
left-bottom => Sol Alt

right-top => Sağ Üst
right-middle => Sağ Orta
right-bottom => Sağ Alt

bottom-left-corner =>Alt Sol Köşe
bottom-left => Alt Sol
bottom-center => Alt orta
bottom-right => Alt Sağ
bottom-right-corner => Alt Sağ Köşe

Sanırım css3 için daha çok beklicez ama yeri geldikce css3 ten bahsetmeye çalışıcam keşke uygulamalı olarakta görebileceğimiz bir tarayıcı olsaydı