v2.5.2
Giriş yap

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%;
}

Hayrettin DAL
2019 gün önce eklendi - 4499 kez görüntülendi.
Github'da Düzenle
Önceki width Sonraki opacity