CSS Marjları
Kenar boşlukları, tanımlanmış sınırların dışında, öğelerin etrafında boşluk oluşturmak için kullanılır.
CSS Marjları
CSS marginözellikleri, tanımlanmış sınırların dışında, öğelerin etrafında boşluk oluşturmak için kullanılır.
CSS ile kenar boşlukları üzerinde tam kontrole sahipsiniz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) kenar boşluğunu ayarlama özellikleri vardır.
Marj - Bireysel Taraflar
CSS, bir öğenin her bir tarafı için kenar boşluğunu belirtmek için özelliklere sahiptir:
margin-topmargin-rightmargin-bottommargin-left
Tüm kenar boşluğu özellikleri aşağıdaki değerlere sahip olabilir:
- auto - tarayıcı marjı hesaplar
- uzunluk - px, pt, cm, vb. cinsinden bir kenar boşluğu belirtir.
- % - içeren öğenin genişliğinin %'si olarak bir kenar boşluğu belirtir
- devral - kenar boşluğunun üst öğeden devralınması gerektiğini belirtir
İpucu: Negatif değerlere izin verilir.
Örnek
Bir <p> öğesinin dört tarafı için farklı kenar boşlukları ayarlayın:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Marj - Steno Özellik
Kodu kısaltmak için tüm kenar boşluğu özelliklerini tek bir özellikte belirtmek mümkündür.
Özellik margin, aşağıdaki bireysel kenar boşluğu özellikleri için bir kestirme özelliktir:
margin-topmargin-rightmargin-bottommargin-left
İşte nasıl çalıştığı:
marginÖzelliğin dört değeri varsa :
- kenar boşluğu: 25px 50px 75px 100px;
- üst kenar boşluğu 25 pikseldir
- sağ kenar boşluğu 50 pikseldir
- alt kenar boşluğu 75 pikseldir
- sol kenar boşluğu 100 piksel
Örnek
Kenar stenografi özelliğini dört değerle kullanın:
p {
margin: 25px 50px 75px 100px;
}
marginÖzelliğin üç değeri varsa :
- kenar boşluğu: 25px 50px 75px;
- üst kenar boşluğu 25 pikseldir
- sağ ve sol kenar boşlukları 50 pikseldir
- alt kenar boşluğu 75 pikseldir
Örnek
Kenar stenografi özelliğini üç değerle kullanın:
p {
margin: 25px 50px 75px;
}
marginÖzelliğin iki değeri varsa :
- kenar boşluğu: 25 piksel 50 piksel;
- üst ve alt kenar boşlukları 25 pikseldir
- sağ ve sol kenar boşlukları 50 pikseldir
Örnek
Marjin steno özelliğini iki değerle kullanın:
p {
margin: 25px 50px;
}
marginÖzelliğin bir değeri varsa :
- kenar boşluğu: 25 piksel;
- dört kenar boşluğunun tümü 25 pikseldir
Örnek
Tek bir değerle margin steno özelliğini kullanın:
p {
margin: 25px;
}
Otomatik Değer
autoÖğeyi kapsayıcı içinde yatay olarak ortalamak için kenar boşluğu özelliğini ayarlayabilirsiniz .
Öğe daha sonra belirtilen genişliği kaplayacak ve kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir.
Örnek
Kenar boşluğunu kullan: otomatik:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Devralınan Değer
Bu örnek, <p class="ex1"> öğesinin sol kenar boşluğunun üst öğeden (<div>) devralınmasını sağlar:
Örnek
Devralma değerinin kullanımı:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}