Margin Özellikleri Ve Css3 Margin Yenilikleri
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 Örnek Ön İzleme
margin-top bir elemente, kutuya yada sayfanın kendisine üstten boşluk verebiliriz yada eksi (-) değer verebiliriz Örnek Ön İzleme
Aynı şekilde diğer kısımlara boşluk verebilir yada hizalayabiliriz tek tek kullanmak yerine kısaltma kullanabiliriz örnek kullanım
p {margin: 2cm 4cm 1cm 3cm}
Örnek Ön İzleme
Veya Her yön için aynı değerde boşluk verebiliriz örnek kullanım
p {margin: 2cm;}
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ı
