CSS Margin Özelliği

Margin özelliğini çoğunuz duymuş olmalısınız.. Bilindiği gibi margin bir elementin etrafını temizlemeye yarar.. Bu ne demek? Şöyle bir örnek ile açıklayalım; eğer bir katman ya da her hangi bir objeniz mevcut.. Bu objeyi diğer objelerden ayrı tutmak, yukarı da yada aşağıda boşluk bırakmak yada diğer bir elementten uzaklaştırmak için kullanılır..

top, right, bottom, ve left Margin özellikleri, sizin isteğinize göre dıştan, içten, sağ ve soldan belirleyeceğiniz alanları destekler.. Ayrıca margin özelliğinde negatif değerler kullanılarak boşluk verme özelliğini tam ters fonksiyonda gerçekleştirebilirsiniz..İlk olarka olası değerlere bir göz atalım;

Olası Değerler

Değer	Açıklaması
auto	Tarayıcı margin değerini belirler. Bu ayardaki değer tarayıcının özelliğine bağlıdır.
length	Sabir bir margini tanımlar. ( pixels, pt, em, vb.)
%	Margin özelliğini % (yüzde) değeri ile oluşturur.

Margin için Bireysel Taraflar – Margini Kişiselleştirme

CSS içerisinde, Margin kullanımı farklı alanlar için farklı margin özellikleri içerir.Bir örnekle daha iyi anlayacaksınız;


margin-top:100px;
 margin-bottom:100px;
 margin-right:50px;
 margin-left:50px;

Bu örnekte belirlenen elementin sağ ve sol taraflarından 50px, yukarı ve aşağı kısımlarından ise 100px boyutunda bir boşluk bırakıldı.

Margin Kısa kod Özelliği

Diğer tüm CSS özelliklerinde olduğu gibi marginde de kısa kodları kullanarak istediğimiz boşluğu oluşturabiliriz. Aşağıda gösterdiğim örnekte bütün margin özelliklerini tek bir margin değişkeniyle atadık;

margin:100px 50px;

Margin özelliğine atayaağımız değerler 1 -4 değer arasında olmalıdır.Bunlar sırasıyla top, right, bottom ve left’tir.

margin:25px 50px 75px 100px;
- top margin: 25px
- right margin:50px
- bottom margin : 75px
- left margin: 100px
margin:25px 50px 75px;
- top margin: 25px
- right ve left margin: 50px
- bottom margin: 75px
margin:25px 50px;
- top ve bottom margin: 25px
- right ve left margin: 50px
margin:25px;
- tüm dört margin: 25px

Şimdi birkaç margin değişkeni nasıl kullanılır tablo halinde görelim;

All CSS Margin Properties

The number in the “CSS” column indicates in which CSS version the property is defined (CSS1 or CSS2).

Özellik	Açıklaması	Değerleri
margin	shorthand diye geçen biraz önce bahsettiğim tüm margin özelliklerini kapsayan tek kod.	margin-top margin-right margin-bottom margin-left
margin-bottom	Elementin alt kısmında oluşacak margin	auto length %
margin-left	Elementin sağ tarafında oluşacak margin	auto length %
margin-right	Elementin sol tarafında oluşacak margin	auto length %
margin-top	Elementin üst kısmında oluşacak margin.	auto length %