CSS'de margin Özelliği

CSS1

Margin özelliği kendi başına kullanıldığında dört kenarın dış boşluklarını düzenler.
margin-top üst kenarın boşluğu düzenler
margin-bottom alt kenar boşluğu düzenler
margin-left sol kenar boşluğu düzenler
margin-right sağ kenar boşluğunu düzenleyip değer atamamıza olanak sağlar

Yapısı (Syntax)margin: uzunluk | yüzde | auto | initial | inherit

Varsayılan Değer	0
JavaScript Yapısı	`object.style.margin="değer"`
Animasyon Özellikleri Uygulanabilir	Evet (Daha fazla detay)

Değerler

Değer	Açıklama	Versiyon
uzunluk	Sabit bir değer kullanılarak (Örn: pt, px, cm, em vb.) dış boşluk verilir.	CSS1
yüzde	Bulunduğu bloğun genişliğini baz alarak dış boşluk verilir.	CSS1
auto	Tarayıcı dış boşluğu otomatik hesaplar.	CSS1
initial	Varsayılan değerine geri döndürür.	CSS1
inherit	Değerini üst öğesinden miras alır.	CSS1

Örnekler

Dış boşluk ekleme

Uzunluk(pxiel) değerini kullanarak farklı sözdizimleriyle(syntax) boşluklar ekledik.

.kutu1{
	margin:10px;		/*ben kutunun 4 kenarına 10 pixel değerinde boşluk atarım*/
}

.kutu2{
	margin:10px 5px;		/*ben kutunun üst ve alt kenara 10 pixel değerinde sağ ve sol kenara 5px boşluk atarım*/
}

.kutu3{
	margin:20px 10px 5px;		/*ben kutunun üst kenarına 20 pixel değerinde, sağ ve sol kenarına 10 pixel ve alt kenarına 5 pixel değerinde boşluk atarım*/
}

.kutu4{
	margin:5px 10px 15px 20px; 		/*ben kutunun üst kenarına 5, sağ kenarına 10, alt kenarına 15 ve sol kenarına 20 pixel değerinde boşluk atarım*/ 
}

Belli bir genişliği olan etiketleri ortalamak için yukarı ve aşağıdan 0 sağ ve soltan auto değeri kullanılır. Böylece yatak eksende ortalanmış olur. Dikey eksende ortalama işlemleri için modern yöntemler mevcut, bunlar flex ile kolayca yapılabilmektedir.

.container {
	width: 500px;
	margin: 0 auto;
}

Ayrıca yüzdeli olarakta margin değeri verilebilir.

p {
	margin: 5% 15%;
}